萬盛學電腦網

 萬盛學電腦網 >> 腳本專題 >> javascript >> jquery 中ajax執行的優先級

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" />'); }   });

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

copyright © 萬盛學電腦網 all rights reserved