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 相关文章推荐
dwr spring的集成实现代码
Mar 22 Javascript
cnblogs TagCloud基于jquery的实现代码
Jun 11 Javascript
js带按钮的提示框可供选择示例代码
Sep 17 Javascript
jQuery is()函数用法3例
May 06 Javascript
jQuery中:radio选择器用法实例
Jan 03 Javascript
Clipboard.js 无需Flash的JavaScript复制粘贴库
Oct 02 Javascript
使用AJAX实现Web页面进度条的实例分享
May 06 Javascript
JS中关于事件处理函数名后面是否带括号的问题
Nov 16 Javascript
12306 刷票脚本及稳固刷票脚本(防挂)
Jan 04 Javascript
Vuex之理解Mutations的用法实例
Apr 19 Javascript
Vue+Element使用富文本编辑器的示例代码
Aug 14 Javascript
JavaScript Window浏览器对象模型原理解析
May 30 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解析http获取的json字符串变量总是空白null
2015/03/02 PHP
Zend Framework路由器用法实例详解
2016/12/11 PHP
Javascript学习笔记2 函数
2010/01/11 Javascript
JavaScript词法作用域与调用对象深入理解
2012/11/29 Javascript
JavaScript动态修改弹出窗口大小的方法
2015/04/06 Javascript
jQuery插件Tooltipster实现漂亮的工具提示
2015/04/12 Javascript
jquery背景跟随鼠标滑动导航
2015/11/20 Javascript
JS数组操作(数组增加、删除、翻转、转字符串、取索引、截取(切片)slice、剪接splice、数组合并)
2016/05/20 Javascript
浅谈JavaScript对象的创建方式
2016/06/13 Javascript
BootStrap实现邮件列表的分页和模态框添加邮件的功能
2016/10/13 Javascript
JS填写银行卡号每隔4位数字加一个空格
2016/12/19 Javascript
javascript 中iframe高度自适应(同域)实例详解
2017/05/16 Javascript
实现微信小程序的wxml文件和wxss文件在webstrom的支持
2017/06/12 Javascript
详解.vue文件解析的实现
2018/06/11 Javascript
Vue.js实现开发购物车功能的方法详解
2019/02/22 Javascript
vuex + keep-alive实现tab标签页面缓存功能
2019/10/17 Javascript
vue 路由子组件created和mounted不起作用的解决方法
2019/11/05 Javascript
vue请求数据的三种方式
2020/03/04 Javascript
js实现双色球效果
2020/08/02 Javascript
基于JavaScript实现随机点名器
2021/02/25 Javascript
python字典序问题实例
2014/09/26 Python
Python中取整的几种方法小结
2017/01/06 Python
python实现SOM算法
2018/02/23 Python
Python实现12306火车票抢票系统
2019/07/04 Python
Parts Express:音频、视频和扬声器的第一来源
2017/04/25 全球购物
美国玩具公司:U.S.Toy
2018/05/19 全球购物
Zavvi西班牙:电子游戏、极客服装、Blu-ray、Funko Pop等
2019/05/03 全球购物
数控专业毕业生自荐信范文
2014/03/04 职场文书
美丽乡村建设实施方案
2014/03/23 职场文书
主题实践活动总结
2014/05/08 职场文书
2015年治庸问责工作总结
2015/07/27 职场文书
中学校园广播稿
2015/08/18 职场文书
如何在C++中调用Python
2021/05/21 Python
python ansible自动化运维工具执行流程
2021/06/24 Python
在vue中import()语法不能传入变量的问题及解决
2022/04/01 Vue.js
Windows server 2003卸载和安装IIS的图文教程
2022/07/15 Servers