jquery 中ajax執(zhí)行的優(yōu)先級(jí)

更新時(shí)間：2015年06月22日 10:37:39 投稿：hebedich

本文給大家講述的是個(gè)人再做用戶(hù)注冊(cè)的時(shí)候遇到的ajax執(zhí)行優(yōu)先級(jí)的問(wèn)題，以及在網(wǎng)友們的幫助下，解決此問(wèn)題的全過(guò)程，這里記錄下來(lái)，分享給大家。

今天在做用戶(hù)注冊(cè)時(shí)：發(fā)現(xiàn)了一個(gè)奇怪的問(wèn)題，請(qǐng)看代碼：

$('input[name="username"]').blur(function(){
    //驗(yàn)證格式
    var pattern = /^[a-z][\w]{4,11}$/i;
    if(!pattern.test($(this).val())) {
      $(this).siblings('.desc').html('<font style="color:red;">5-12個(gè)字符，必須以字母開(kāi)頭，只能輸入數(shù)字，字母和下劃線(xiàn)</font>');
      return false;
    }
    //驗(yàn)證用戶(hù)名是否被注冊(cè)
    $.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" />');
  });

按道理說(shuō)，上面的格式是

1、驗(yàn)證用戶(hù)名是否符合格式
2、格式正確再AJAX判斷用戶(hù)名是否被占用，
3、都成功則顯示正確的圖標(biāo)，

但是問(wèn)題是當(dāng)我驗(yàn)證用戶(hù)格式成功了之后，它就直接執(zhí)行了，alert('成功')，然后再執(zhí)行ajax，這是為什么呢？是ajax執(zhí)行的時(shí)間問(wèn)題嗎？還是別的？？？

這是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'=>'該用戶(hù)名已被注冊(cè)?。?！')));
  }else{
    exit(json_encode(array('status'=>'success')));
  }
}

分析如下

ajax是異步操作，當(dāng)執(zhí)行ajax相關(guān)功能函數(shù)時(shí)，系統(tǒng)先返回函數(shù)，再進(jìn)行請(qǐng)求，當(dāng)收到請(qǐng)求結(jié)果，會(huì)通過(guò)調(diào)用回調(diào)函數(shù)的方式返回給用戶(hù)。

$('input[name="username"]').blur(function(){
    //驗(yàn)證格式
    var pattern = /^[a-z][\w]{4,11}$/i;
    if(!pattern.test($(this).val())) {
      $(this).siblings('.desc').html('<font style="color:red;">5-12個(gè)字符，必須以字母開(kāi)頭，只能輸入數(shù)字，字母和下劃線(xiàn)</font>');
      return false;
    }
    //驗(yàn)證用戶(hù)名是否被注冊(cè)
    $.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){  //對(duì)于post函數(shù)，第三個(gè)參數(shù)為回調(diào)函數(shù)
      alert('成功');
    }
    ,'json');
    
    //成功
 //alert('成功');
    //$(this).siblings('.desc').html('<img src="./public/images/ok.gif" />');
  });

照這樣修改一下，試試，體會(huì)一下不同之處。
不同的ajax函數(shù) 其回調(diào)函數(shù)的使用方法略有不同，可參考w3school的教程或jQuery官網(wǎng)。

這個(gè)其實(shí)是js的同步和異步的問(wèn)題，異步的話(huà)你可以想象一下兩條線(xiàn)路

復(fù)制代碼代碼如下:

--執(zhí)行函數(shù)調(diào)用--正則驗(yàn)證--發(fā)起ajax--函數(shù)返回         ajax回調(diào)

                            |                        |

                            |                        |

                           瀏覽器請(qǐng)求--php處理--瀏覽器接到結(jié)果

如果想讓函數(shù)返回在ajax回調(diào)之后，可以改變上邊的模型，例如：

復(fù)制代碼代碼如下:

--執(zhí)行函數(shù)調(diào)用--正則驗(yàn)證--發(fā)起ajax                  ajax回調(diào)--函數(shù)返回

                            |                        |

                            |                        |

                           瀏覽器請(qǐng)求--php處理--瀏覽器接到結(jié)果

這個(gè)可以通過(guò)修改jquery的發(fā)起ajax是異步還是同步方式來(lái)實(shí)現(xiàn)！

$('input[name="username"]').blur(function(){
  //驗(yàn)證格式
  var pattern = /^[a-z][\w]{4,11}$/i;
  if(!pattern.test($(this).val())) {
    $(this).siblings('.desc').html('<font style="color:red;">5-12個(gè)字符，必須以字母開(kāi)頭，只能輸入數(shù)字，字母和下劃線(xiàn)</font>');
    return false;
  }
  //驗(yàn)證用戶(hù)名是否被注冊(cè)
  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" />');
  }
  
});

以上所述就是本文的全部?jī)?nèi)容了，希望大家能夠喜歡。

您可能感興趣的文章: