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 相关文章推荐
jQuery 动画基础教程
Dec 25 Javascript
javascript 保存文件到本地实现方法
Nov 29 Javascript
js中通过split函数分割字符串成数组小例子
Sep 21 Javascript
AngularJS全局scope与Isolate scope通信用法示例
Nov 22 Javascript
工厂模式在JS中的实践
Jan 18 Javascript
QQ跳转支付宝并自动领红包脚本(最新)
Jun 22 Javascript
用Object.prototype.toString.call(obj)检测对象类型原因分析
Oct 11 Javascript
vue项目打包之后背景样式丢失的解决方案
Jan 17 Javascript
微信小程序实现语音识别转文字功能及遇到的坑
Aug 02 Javascript
关于JS模块化的知识点分享
Oct 16 Javascript
vue请求数据的三种方式
Mar 04 Javascript
Vue实现圆环进度条的示例
Feb 06 Vue.js
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+mysql一个名片库程序
2006/10/09 PHP
PHP 和 MySQL 开发的 8 个技巧
2007/01/02 PHP
PHP使用stream_context_create()模拟POST/GET请求的方法
2016/04/02 PHP
PHP获取访问页面HTTP状态码的实现代码
2016/11/03 PHP
PHP基于简单递归函数求一个数阶乘的方法示例
2017/04/26 PHP
禁止拷贝网页内容的js代码
2014/01/22 Javascript
js父窗口关闭时子窗口随之关闭完美解决方案
2014/04/29 Javascript
微信小程序 tabs选项卡效果的实现
2017/01/05 Javascript
js放到head中失效的原因与解决方法
2017/03/07 Javascript
基于vue2.0+vuex的日期选择组件功能实现
2017/03/13 Javascript
react-native 完整实现登录功能的示例代码
2017/09/11 Javascript
js实现随机点名系统(实例讲解)
2017/10/18 Javascript
菊花转动的jquery加载动画效果
2018/08/19 jQuery
vue路由切换之淡入淡出的简单实现
2019/10/31 Javascript
浅谈JavaScript节流和防抖函数
2020/08/25 Javascript
[07:52]2014DOTA2 TI逗比武士游V社解说背后的故事
2014/07/10 DOTA
[06:45]DOTA2-DPC中国联赛 正赛 Magma vs LBZS 选手采访
2021/03/11 DOTA
[01:16:50]DOTA2-DPC中国联赛 正赛 Phoenix vs CDEC BO3 第一场 3月7日
2021/03/11 DOTA
Python配置文件解析模块ConfigParser使用实例
2015/04/13 Python
python在指定目录下查找gif文件的方法
2015/05/04 Python
Python实现批量下载图片的方法
2015/07/08 Python
使用Python的Flask框架构建大型Web应用程序的结构示例
2016/06/04 Python
python 动态加载的实现方法
2017/12/22 Python
解析python实现Lasso回归
2019/09/11 Python
flask 实现token机制的示例代码
2019/11/07 Python
pytorch 实现cross entropy损失函数计算方式
2020/01/02 Python
pytorch中的inference使用实例
2020/02/20 Python
python plt可视化——打印特殊符号和制作图例代码
2020/04/17 Python
Python bisect模块原理及常见实例
2020/06/17 Python
Keras-多输入多输出实例(多任务)
2020/06/22 Python
迎七一演讲稿
2014/09/12 职场文书
学生检讨书范文
2014/10/30 职场文书
2015年银行员工工作总结
2015/04/24 职场文书
2015年材料员工作总结
2015/04/30 职场文书
安全教育的主题班会
2015/08/13 职场文书
根德5570型九灯四波段立体声收音机是电子管收音机的楷模 ? 再论5570
2022/04/05 无线电