jquery中ajax执行顺序调整

来源：动视网责编：小采时间：2020-11-27 19:52:13

jquery中ajax执行顺序调整

jquery中ajax执行顺序调整:这次给大家带来jquery中ajax执行顺序调整，jquery中ajax执行顺序调整的注意事项有哪些，下面就是实战案例，一起来看一下。今天在做用户注册时：发现了一个奇怪的问题，请看代码：$('input[name="username"]').blur

推荐度：

点击下载本文 文档为doc格式

导读jquery中ajax执行顺序调整:这次给大家带来jquery中ajax执行顺序调整，jquery中ajax执行顺序调整的注意事项有哪些，下面就是实战案例，一起来看一下。今天在做用户注册时：发现了一个奇怪的问题，请看代码：$('input[name="username"]').blur

这次给大家带来jquery中ajax执行顺序调整，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;
 }
 //验证用户名是否被注册
 $.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" />');
 }
 
});

相信看了本文案例你已经掌握了方法，更多精彩请关注Gxl网其它相关文章！

jquery中ajax执行顺序调整

推荐度：

点击下载本文 文档为doc格式

标签：设置执行 ajax

热门焦点

jquery中ajax执行顺序调整

jquery中ajax执行顺序调整

jquery中ajax执行顺序调整

最新推荐

猜你喜欢

热门推荐