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 相关文章推荐
js数字输入框(包括最大值最小值限制和四舍五入)
Nov 24 Javascript
使用jquery 简单实现下拉菜单
Jan 14 Javascript
jQuery蓝色风格滑动导航栏代码分享
Aug 19 Javascript
jQuery 获取跨域XML(RSS)数据的相关总结分析
May 18 Javascript
JS 循环li添加点击事件 (闭包的应用)
Dec 10 Javascript
AngularJS表单提交实例详解
Feb 18 Javascript
mint-ui在vue中的使用示例
Apr 05 Javascript
vue filters的使用详解
Jun 11 Javascript
工作中常用到的ES6语法
Sep 04 Javascript
vue.js多页面开发环境搭建过程
Apr 24 Javascript
基于vue+axios+lrz.js微信端图片压缩上传方法
Jun 25 Javascript
js实现带箭头的进度流程
Mar 26 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
从C/C++迁移到PHP——判断字符类型的函数
2006/10/09 PHP
php常用ODBC函数集(详细)
2013/06/24 PHP
php事务回滚简单实现方法示例
2017/03/28 PHP
php 数组元素快速去重
2017/05/05 PHP
php中的依赖注入实例详解
2019/08/14 PHP
JQuery Tips(3) 关于$()包装集内元素的改变
2009/12/14 Javascript
jQuery 打造动态下滑菜单实现说明
2010/04/15 Javascript
解决js中window.open弹出的是上次的缓存页面问题
2013/12/29 Javascript
纯js写的分页表格数据为json串
2014/02/18 Javascript
js获取内联样式的方法
2015/01/27 Javascript
jQuery选择器源码解读(三):tokenize方法
2015/03/31 Javascript
JS动态添加iframe的代码
2015/09/14 Javascript
跟我学习javascript的函数和函数表达式
2015/11/16 Javascript
谈谈Jquery ajax中success和complete有哪些不同点
2015/11/20 Javascript
JavaScript实现弹出DIV层同时页面背景渐变成半透明效果
2016/03/25 Javascript
JS传值出现中文参数乱码的解决方法
2016/06/30 Javascript
js实现图片缓慢放大缩小效果
2016/08/02 Javascript
JS实现的五级联动菜单效果完整实例
2017/02/23 Javascript
Vuejs实现带样式的单文件组件新方法
2017/05/02 Javascript
BootStrap模态框和select2合用时input无法获取焦点的解决方法
2017/09/01 Javascript
layui中layer前端组件实现图片显示功能的方法分析
2017/10/13 Javascript
Vue2 监听属性改变watch的实例代码
2018/08/27 Javascript
关于vue的列表图片选中打钩操作
2020/09/09 Javascript
在Vue中使用CSS3实现内容无缝滚动的示例代码
2020/11/27 Vue.js
一分钟学会JavaScript中的try-catch
2020/12/14 Javascript
Python正则简单实例分析
2017/03/21 Python
python3中的logging记录日志实现过程及封装成类的操作
2020/05/12 Python
Python3.8.2安装包及安装教程图文详解(附安装包)
2020/11/28 Python
俄罗斯厨房产品购物网站:COOK HOUSE
2021/03/15 全球购物
互联网创业计划书的书写步骤
2014/01/28 职场文书
给孩子的新年寄语
2014/04/08 职场文书
2014年十一国庆向国旗敬礼寄语
2014/04/11 职场文书
工伤认定行政答辩状
2015/05/22 职场文书
仰望星空观后感
2015/06/10 职场文书
spring IOC容器的Bean管理XML自动装配过程
2022/05/30 Java/Android
js面向对象编程OOP及函数式编程FP区别
2022/07/07 Javascript