jquery 中ajax执行的优先级

2024-03-30 07:46:03 458

今天在做用户注册时：发现了一个奇怪的问题，请看代码：

$('input[name="username"]').blur(function(){
//验证格式
varpattern=/^[a-z][\w]{4,11}$/i;
if(!pattern.test($(this).val())){
$(this).siblings('.desc').html('<fontstyle="color:red;">5-12个字符，必须以字母开头，只能输入数字，字母和下划线</font>');
returnfalse;
}
//验证用户名是否被注册
$.post('register.php?act=checkUser',{username:$(this).val()},function(data){
if(data.status=='error'){
$('input[name="username"]').siblings('.desc').html('<fontstyle="color:red;">'+data.info+'</font>');
returnfalse;
}
},'json');

//成功
alert('成功');
//$(this).siblings('.desc').html('<imgsrc="./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="SELECTidFROM{$sys_vars['db_pre']}userWHEREusername='{$_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(){
//验证格式
varpattern=/^[a-z][\w]{4,11}$/i;
if(!pattern.test($(this).val())){
$(this).siblings('.desc').html('<fontstyle="color:red;">5-12个字符，必须以字母开头，只能输入数字，字母和下划线</font>');
returnfalse;
}
//验证用户名是否被注册
$.post('register.php?act=checkUser',{username:$(this).val()},function(data){
if(data.status=='error'){
$('input[name="username"]').siblings('.desc').html('<fontstyle="color:red;">'+data.info+'</font>');
returnfalse;
}
},
function(data){//对于post函数，第三个参数为回调函数
alert('成功');
}
,'json');

//成功
//alert('成功');
//$(this).siblings('.desc').html('<imgsrc="./public/images/ok.gif"/>');
});

照这样修改一下，试试，体会一下不同之处。
不同的ajax函数其回调函数的使用方法略有不同，可参考w3school的教程或jQuery官网。

这个其实是js的同步和异步的问题，异步的话你可以想象一下两条线路


--执行函数调用--正则验证--发起ajax--函数返回        ajax回调

                           |                       |

                           |                       |

                          浏览器请求--php处理--浏览器接到结果

如果想让函数返回在ajax回调之后，可以改变上边的模型，例如：


--执行函数调用--正则验证--发起ajax                 ajax回调--函数返回

                           |                       |

                           |                       |

                          浏览器请求--php处理--浏览器接到结果

这个可以通过修改jquery的发起ajax是异步还是同步方式来实现！

$('input[name="username"]').blur(function(){
//验证格式
varpattern=/^[a-z][\w]{4,11}$/i;
if(!pattern.test($(this).val())){
$(this).siblings('.desc').html('<fontstyle="color:red;">5-12个字符，必须以字母开头，只能输入数字，字母和下划线</font>');
returnfalse;
}
//验证用户名是否被注册
varajaxCheckUser=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('<fontstyle="color:red;">'+data.info+'</font>');
//returnfalse;
}else{
ajaxCheckUser=true;
}
},'json');

if(ajaxCheckUser){
//成功
alert('成功');
//$(this).siblings('.desc').html('<imgsrc="./public/images/ok.gif"/>');
}

});

以上所述就是本文的全部内容了，希望大家能够喜欢。

jquery 中ajax执行的优先级

热门推荐

随机推荐