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淡入淡出效果的实现思路
Mar 31 Javascript
Textbox控件注册回车事件及触发按钮提交事件具体实现
Mar 04 Javascript
javascript原型链继承用法实例分析
Jan 28 Javascript
JavaScript计时器示例分析
Feb 05 Javascript
js获取当前日期前七天的方法
Feb 28 Javascript
AngularJs实现ng1.3+表单验证
Dec 10 Javascript
Linux下为Node.js程序配置MySQL或Oracle数据库的方法
Mar 19 Javascript
弹出遮罩层后禁止滚动效果【实现代码】
Apr 29 Javascript
js实现数组和对象的深浅拷贝
Sep 30 Javascript
angular2系列之路由转场动画的示例代码
Nov 09 Javascript
微信小程序渲染性能调优小结
Jul 30 Javascript
vue实现在进行增删改操作后刷新页面
Aug 05 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
Laravel中获取路由参数Route Parameters的五种方法示例
2017/09/29 PHP
Yii2框架实现登录、退出及自动登录功能的方法详解
2017/10/24 PHP
javascript 构建一个xmlhttp对象池合理创建和使用xmlhttp对象
2010/01/15 Javascript
jQuery 表格工具集
2010/04/25 Javascript
js获取判断上传文件后缀名的示例代码
2014/02/19 Javascript
jQuery中:first选择器用法实例
2014/12/30 Javascript
基于HTML+CSS,jQuery编写的简易计算器后续(添加了键盘监听)
2016/01/05 Javascript
基于JS实现的笛卡尔乘积之商品发布
2016/05/13 Javascript
全面解析bootstrap格子布局
2016/05/22 Javascript
浅析jsopn跨域请求原理及cors(跨域资源共享)的完美解决方法
2017/02/06 Javascript
vue mint-ui学习笔记之picker的使用
2017/10/11 Javascript
详解node nvm进行node多版本管理
2017/10/21 Javascript
Vue.js 事件修饰符的使用教程
2018/11/01 Javascript
详解nodejs http请求相关总结
2019/03/31 NodeJs
微信小程序云函数添加数据到数据库的方法
2020/03/04 Javascript
基于python的汉字转GBK码实现代码
2012/02/19 Python
使用Python编写Linux系统守护进程实例
2015/02/03 Python
python编程开发之textwrap文本样式处理技巧
2015/11/13 Python
tensorflow实现简单的卷积神经网络
2018/05/24 Python
对Python Class之间函数的调用关系详解
2019/01/23 Python
windows环境中利用celery实现简单任务队列过程解析
2019/11/29 Python
如何更改 pandas dataframe 中两列的位置
2019/12/27 Python
pytorch中的卷积和池化计算方式详解
2020/01/03 Python
python实现PCA降维的示例详解
2020/02/24 Python
Django路由层URLconf作用及原理解析
2020/09/24 Python
培训主管的岗位职责
2013/11/23 职场文书
社区活动邀请函范文
2014/01/29 职场文书
科技开发中心办公室主任岗位责任制
2014/02/10 职场文书
读书伴我成长演讲稿
2014/05/07 职场文书
电视节目策划方案
2014/05/16 职场文书
硕士研究生就业推荐信
2014/05/18 职场文书
酒店开业庆典策划方案
2014/05/28 职场文书
学校开除通知书
2015/04/25 职场文书
2015年度优秀员工获奖感言
2015/07/31 职场文书
如何使用Python对NetCDF数据做空间相关分析
2021/04/21 Python
Pytorch实现图像识别之数字识别(附详细注释)
2021/05/11 Python