Priority of ajax execution in jquery

Priority of ajax execution in jquery

This article tells you about the ajax execution priority problem encountered when individuals register users again, and the whole process of solving this problem with the help of netizens. It is recorded here, share with you.

When registering a user today: I found a strange problem. Please refer to the Code:

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19

$ ('Input [name = "username"] '). blur (function (){ // Verify the format Var pattern =/^ [a-z] [\ w] {4, 11} $/I; If (! Pattern. test ($ (this). val ())){ Symbol (this).siblings('.desc'character .html ('<font style = "color: red;"> 5-12 characters, must begin with a letter, can only enter numbers, letters and underscores </font> '); Return false; } // Verify that the user name is registered $. Post ('register. php? Act = checkuser', {username: $ (this). val ()}, function (data ){ If (data. status = 'error '){ $ ('Input [name = "username" }'hangzhou.siblings('.desc'hangzhou.html ('<font style = "color: red;">' + data.info + '</font> '); Return false; } }, 'Json ');   // Succeeded Alert ('success '); // Configure (this).siblings('.desc'hangzhou.html (' '); });

The above format is

1. Verify that the user name meets the format

2. The format is correct, and then AJAX determines whether the user name is occupied,

3. If both are successful, the correct icon is displayed,

But the problem is that when I verify that the user format is successful, it will be executed directly, alert ('success'), and then execute ajax. Why? Is it because of the time when ajax is executed? Or something else ???

This is the PHP code:

?

1 2 3 4 5 6 7 8 9 10 11 12 13

If ($ _ GET ['ac'] = 'checkuser '){ If ($ _ SERVER ['HTTP _ X_REQUESTED_WITH ']! = 'Xmlhttprequest ') exit ('invalid operation !!! ');   $ SQL = "SELECT id FROM {$ sys_vars ['db _ pre']} user WHERE username = '{$ _ POST ['username']}'";   $ Result = mysql_query ($ SQL ); $ Data = mysql_fetch_assoc ($ result ); If ($ data ){ Exit (json_encode (array ('status' => 'error', 'info' => 'this user name has been registered !!! '))); } Else { Exit (json_encode (array ('status' => 'success '))); } }

The analysis is as follows:

Ajax is an asynchronous operation. When ajax-related functions are executed, the system first returns the function and then the request. When the request result is received, the system returns the result to the user by calling the callback function.

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23

$ ('Input [name = "username"] '). blur (function (){ // Verify the format Var pattern =/^ [a-z] [\ w] {4, 11} $/I; If (! Pattern. test ($ (this). val ())){ Symbol (this).siblings('.desc'character .html ('<font style = "color: red;"> 5-12 characters, must begin with a letter, can only enter numbers, letters and underscores </font> '); Return false; } // Verify that the user name is registered $. Post ('register. php? Act = checkuser', {username: $ (this). val ()}, function (data ){ If (data. status = 'error '){ $ ('Input [name = "username" }'hangzhou.siblings('.desc'hangzhou.html ('<font style = "color: red;">' + data.info + '</font> '); Return false; } }, Function (data) {// for the post function, the third parameter is the callback function. Alert ('success '); } , 'Json ');   // Succeeded // Alert ('success '); // Configure (this).siblings('.desc'hangzhou.html (' '); });

Modify the settings as follows and try again.

Different ajax functions use different callback functions. For details, refer to the w3school tutorial or jQuery official website.

This is actually a problem of js synchronization and Asynchronization. If it is asynchronous, you can imagine two lines.

Copy the Code as follows:

-- Execute function call -- Regular Expression verification -- initiate ajax -- function return ajax callback

|

|

Browser request -- php processing -- the browser receives the result

If you want the function to return results after ajax callback, you can change the above model, for example:

Copy the Code as follows:

-- Execute function call -- Regular Expression verification -- initiate ajax callback -- Return Function

|

|

Browser request -- php processing -- the browser receives the result

This can be done by modifying the asynchronous or synchronous ajax method initiated by jquery!

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31

$ ('Input [name = "username"] '). blur (function (){ // Verify the format Var pattern =/^ [a-z] [\ w] {4, 11} $/I; If (! Pattern. test ($ (this). val ())){ Symbol (this).siblings('.desc'character .html ('<font style = "color: red;"> 5-12 characters, must begin with a letter, can only enter numbers, letters and underscores </font> '); Return false; } // Verify that the user name is registered Var ajaxCheckUser = false; $. Ajax ({ Type: "POST ", Url: "register. php? Act = checkUser ", Data: {username: $ (this). val ()}, // Note the following: Async: false Success: function (data ){ If (data. status = 'error '){ $ ('Input [name = "username" }'hangzhou.siblings('.desc'hangzhou.html ('<font style = "color: red;">' + data.info + '</font> '); // Return false; } Else { AjaxCheckUser = true; } }, 'Json ');   If (ajaxCheckUser ){ // Succeeded Alert ('success '); // Configure (this).siblings('.desc'hangzhou.html (' '); }   });

The above is all the content of this article. I hope you will like it.