Home > Web Front-end > JS Tutorial > body text

jquery ajax synchronous and asynchronous execution solution to the problem that the return value cannot be obtained_jquery

WBOY
Release: 2016-05-16 17:57:26
Original
854 people have browsed it

Let’s first look at a simple js ajax return value of jquery

code

Copy code The code is as follows:

function getReturnAjax{
$.ajax({
type:"POST", data:"username=" vusername.value,
success:function(msg){
if(msg=="ok"){
showtipex(vusername.id," The username can be used",false)
return true; else showtipex(vusername.id,"< b>The user has been registered",false);
vusername.className="bigwrong";
return false;
} }

But when we call getReturnAjax(), we find that all we get is false. That is to say, return true and return false have no effect at all. Debugging with firebug under Firefox also proves that , the code will not be executed to the return part at all.

Let’s imagine defining a variable in the function, then assigning it in ajax, and finally returning the variable at the end of the function. Will it be effective? Let’s put The code is modified as follows:

Code
Copy code The code is as follows:

function getAjaxReturn(){
var bol=false;
$.ajax({
type:"POST", data:"username=" vusername.value,
success:function(msg){
if(msg=="ok"){
showtipex(vusername.id,"This username can use",false)
// return true;
bol=true; else showtipex(vusername.id,"The user has been registered",false);
vusername.className ="bigwrong";
//return false; }
return bol;

The result still doesn't work. The final solution is 2, as follows

1. Add async:false. That is, it is changed to synchronization. What does it mean? (According to a colleague’s explanation, the following js will not be executed until the ajax has a return value. This makes it clear, no wonder the assignments in many ajax calls in the past did not work). In this way, after ajax has assigned the value to bol, the following js part will be executed. If it was asynchronous just now, it would have been returned before the value could be assigned.

Code
Copy code The code is as follows:

function getAjaxReturn() {
var bol=false;
$.ajax({
type:"POST",
async:false, data:"username=" vusername.value,
success:function(msg ){
if(msg=="ok"){
showtipex(vusername.id,"This username can use",false)
// return true;
bol=true; else showtipex(vusername.id,"The user has been registered",false);
vusername.className="bigwrong";
//return false; } return bol;
}

2. Solve this problem by passing in a function.
function getAjaxReturn(success_function,fail_function){
var bol=false;
$.ajax({
type:"POST", data:"username=" vusername.value,
success:function(msg){
if(msg=="ok"){
showtipex(vusername.id,"This username can use< /b>",false)
success_function(msg);
}
else showtipex(vusername.id,"< ;font color='#ffff00'>The user has been registered",false);
vusername.className="bigwrong";
fail_function(msg);
//return false; }
});
function success_function(info) //do what you want do
alert(info); funciont fail_function(info) //do what you want do
alert(info);
}

Related labels:
source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template