jQuery-jquery 中ajax执行的优先级

Question

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

$('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" />');
    });

Answer 1

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官网。

Answer 2

这个其实是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" />');
}

});