jquery 中ajax执行的优先级

前端技术 2023/09/08 JavaScript

今天在做用户注册时：发现了一个奇怪的问题，请看代码：

$(\'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代码：

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?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是异步还是同步方式来实现！

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

以上所述就是本文的全部内容了，希望大家能够喜欢。

本文地址：https://www.stayed.cn/item/22445

转载请注明出处。

本站部分内容来源于网络,如侵犯到您的权益,请 联系我

我的博客

人生若只如初见，何事秋风悲画扇。

我的标签

随笔档案