jquery 中ajax執行的優先順序

 　　本文給大家講述的是個人再做使用者註冊的時候遇到的ajax執行優先順序的問題，以及在網友們的協助下，解決此問題的全過程，這裡記錄下來，分享給大家。

　　今天在做使用者註冊時：發現了一個奇怪的問題，請看代碼：

　　?

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

$('input[name="username"]').blur(function(){ //驗證格式 var pattern = /^[a-z][w]{4,11}$/i; if(!pattern.test($(this).val())) { $(this).siblings('.desc').html('<font style="color:red;">5-12個字元，必須以字母開頭，只能輸入數字，字母和底線</font>'); return false; } //驗證使用者名稱是否被註冊 $.post('register.php?act=checkUser',{username:$(this).val()},function(data){ if(data.status == 'error') { $('input[name="username"]').siblings('.desc').html('<font style="color:red;">'+data.info+'</font>'); return false; } },'json');   //成功 alert('成功'); //$(this).siblings('.desc').html('<img src="./public/images/ok.gif" />'); });

　　按道理說，上面的格式是

　　1、驗證使用者名稱是否符合格式

　　2、格式正確再AJAX判斷使用者名稱是否被佔用，

　　3、都成功則顯示正確的表徵圖，

　　但是問題是當我驗證使用者格式成功了之後，它就直接執行了，alert('成功')，然後再執行ajax，這是為什麼呢?是ajax執行的時間問題嗎?還是別的???

　　這是PHP代碼：

　　?

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

if($_GET['act'] == 'checkUser') { if($_SERVER['HTTP_X_REQUESTED_WITH'] !== 'XMLHttpRequest') exit('非法操作！！！');   $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'=>'該使用者名稱已被註冊！！！'))); }else{ exit(json_encode(array('status'=>'success'))); } }

　　分析如下

　　ajax是非同步作業，當執行ajax相關功能函數時，系統先返回函數，再進行請求，當收到請求結果，會通過調用回呼函數的方式返回給使用者。

　　?

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(){ //驗證格式 var pattern = /^[a-z][w]{4,11}$/i; if(!pattern.test($(this).val())) { $(this).siblings('.desc').html('<font style="color:red;">5-12個字元，必須以字母開頭，只能輸入數字，字母和底線</font>'); return false; } //驗證使用者名稱是否被註冊 $.post('register.php?act=checkUser',{username:$(this).val()},function(data){ if(data.status == 'error') { $('input[name="username"]').siblings('.desc').html('<font style="color:red;">'+data.info+'</font>'); return false; } }, function(data){ //對於post函數，第三個參數為回呼函數 alert('成功'); } ,'json');   //成功 //alert('成功'); //$(this).siblings('.desc').html('<img src="./public/images/ok.gif" />'); });

　　照這樣修改一下，試試，體會一下不同之處。

　　不同的ajax函數 其回呼函數的使用方法略有不同，可參考w3school的教程或jQuery官網。

　　這個其實是js的同步和非同步問題，非同步話你可以想象一下兩條線路

　　複製代碼 代碼如下:

　　--執行函數調用--正則驗證--發起ajax--函數返回 ajax回調

　　| |

　　| |

　　瀏覽器請求--php處理--瀏覽器接到結果

　　如果想讓函數返回在ajax回調之後，可以改變上邊的模型，例如：

　　複製代碼 代碼如下:

　　--執行函數調用--正則驗證--發起ajax ajax回調--函數返回

　　| |

　　| |

　　瀏覽器請求--php處理--瀏覽器接到結果

　　這個可以通過修改jquery的發起ajax是非同步還是同步方式來實現!

　　?

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(){ //驗證格式 var pattern = /^[a-z][w]{4,11}$/i; if(!pattern.test($(this).val())) { $(this).siblings('.desc').html('<font style="color:red;">5-12個字元，必須以字母開頭，只能輸入數字，字母和底線</font>'); return false; } //驗證使用者名稱是否被註冊 var ajaxCheckUser = false; $.ajax({ type: "POST", url: "register.php?act=checkUser", data: {username:$(this).val()}, // 注意這裡 async:false success: function(data){ if(data.status == 'error') { $('input[name="username"]').siblings('.desc').html('<font style="color:red;">'+data.info+'</font>'); //return false; } else { ajaxCheckUser = true; } },'json');   if(ajaxCheckUser) { //成功 alert('成功'); //$(this).siblings('.desc').html('<img src="./public/images/ok.gif" />'); }   });

　　以上所述就是本文的全部內容了，希望大家能夠喜歡。