jquery 中ajax執行的優先權_jquery

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

$('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&#63;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程式碼：

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相關功能函數時，系統先回傳函數，再進行請求，當收到請求結果，會透過呼叫回呼函數的方式傳回給使用者。

$('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&#63;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是異步還是同步方式來實現！

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