jquery 中ajax执行的优先级


Posted in Javascript onJune 22, 2015

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

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

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

Javascript 相关文章推荐
基于JavaScript 类的使用详解
May 07 Javascript
js字符串转成JSON
Nov 07 Javascript
jquery制作居中遮罩层效果分享
Feb 21 Javascript
详解AngularJS中的filter过滤器用法
Jan 04 Javascript
JavaScript实现获取某个元素相邻兄弟节点的prev与next方法
Jan 25 Javascript
JS从一组数据中找到指定的单条数据的方法
Jun 02 Javascript
使用HTML5+Boostrap打造简单的音乐播放器
Aug 05 Javascript
浅谈JS继承_寄生式继承 &amp; 寄生组合式继承
Aug 16 Javascript
Node 模块原理与用法详解
May 13 Javascript
解决微信授权成功后点击按返回键出现空白页和报错的问题
Jun 08 Javascript
原生js滑动轮播封装
Jul 31 Javascript
js面向对象封装级联下拉菜单列表的实现步骤
Feb 08 Javascript
jquery中ready()函数执行的时机和window的load事件比较
Jun 22 #Javascript
jquery中toggle函数交替使用问题
Jun 22 #Javascript
浅谈js 闭包引起的内存泄露问题
Jun 22 #Javascript
js闭包所用的场合以及优缺点分析
Jun 22 #Javascript
JavaScript创建闭包的两种方式的优劣与区别分析
Jun 22 #Javascript
javascript中使用new与不使用实例化对象的区别
Jun 22 #Javascript
浅谈javascript构造函数与实例化对象
Jun 22 #Javascript
You might like
php在文件指定行中写入代码的方法
2012/05/23 PHP
php+ajax实现带进度条的上传图片功能【附demo源码下载】
2016/09/14 PHP
php输出图像的方法实例分析
2017/02/16 PHP
浅谈PHP中的面向对象OOP中的魔术方法
2017/06/12 PHP
PHP绕过open_basedir限制操作文件的方法
2018/06/10 PHP
Javascript中的变量使用说明
2010/05/18 Javascript
jQuery .tmpl(), .template()学习资料小结
2011/07/18 Javascript
MyEclipse取消验证Js的两种方法
2013/11/14 Javascript
js 异步操作回调函数如何控制执行顺序
2013/12/24 Javascript
js弹窗返回值详解(window.open方式)
2014/01/11 Javascript
收集json解析的四种方法分享
2014/01/17 Javascript
jquery1.10给新增元素绑定事件的方法
2014/03/06 Javascript
jq实现酷炫的鼠标经过图片翻滚效果
2014/03/12 Javascript
javascript实现表单提交后,提交按钮不可用的方法
2015/04/18 Javascript
js控制台输出的方法(详解)
2016/11/26 Javascript
简单实现JS倒计时效果
2016/12/23 Javascript
jQuery实现页面滚动时智能浮动定位
2017/01/08 Javascript
JavaScript和jQuery制作光棒效果
2017/02/24 Javascript
浅析webpack 如何优雅的使用tree-shaking(摇树优化)
2017/08/16 Javascript
Vue 创建组件的两种方法小结(必看)
2018/02/23 Javascript
vue更改数组中的值实例代码详解
2020/02/07 Javascript
[01:13:17]Secret vs NB 2018国际邀请赛小组赛BO2 第二场 8.19
2018/08/21 DOTA
python写入中英文字符串到文件的方法
2015/05/06 Python
举例讲解Python面相对象编程中对象的属性与类的方法
2016/01/19 Python
Python排序搜索基本算法之冒泡排序实例分析
2017/12/09 Python
python使用生成器实现可迭代对象
2018/03/20 Python
Python实现PyPDF2处理PDF文件的方法示例
2019/09/25 Python
python实现吃苹果小游戏
2020/03/21 Python
GOOD AMERICAN官网:为曲线性感而设计
2017/12/28 全球购物
最新教师自我评价分享
2013/11/12 职场文书
聘用意向书范本
2014/04/01 职场文书
经济担保书范文
2014/04/02 职场文书
留学推荐信英文范文
2015/03/26 职场文书
公司副总经理岗位职责
2015/04/08 职场文书
微信小程序用户授权最佳实践指南
2021/05/08 Javascript
Java tomcat手动配置servlet详解
2021/11/27 Java/Android