jquery ajax执行顺序

项目中，经常需使用到jquery ajax请求后台数据校验前端用户输入数据的有效性，然后根据服务器返回的结果来确定是否允许本次的请求数据可以提交服务器

通过ajax请求后台校验前端用户输入数据

function checkUserName(userName){
    $.ajax({
        method:"POST",
        url:"../front/checkUserName",
        data:{"userName":userName},
        success:function(data){
            if(data.errCode < 0){
                alert(data.errMsg);
                return true;
            }
        },
        error:function(){
            alert("系统异常，请稍后重试");
            return false;
        }
    });
    return true;
}
$(function(){
    if(!checkUserName($("#userName").val().trim())){return ;}
    $("form").submit();
});

checkUserName函数的返回值始终是true，并且在提交数据到服务器时，会出现请求失败，回调error函数，可通过浏览器控制台F12查看http请求。究其原因如下jquery中文文档所说：

jquery中文文档

解决此问题的办法只需要在ajax请求中增加async(默认为true)参数并赋值为false，始之为同步请求，也就是后面的代码需要等待此次ajax请求结束后在执行，所以，达到此要求的代码如下:

function checkUserName(userName){
    $.ajax({
        method:"POST",
        async:false,
        url:"../front/checkUserName",
        data:{"userName":userName},
        success:function(data){
            if(data.errCode < 0){
                alert(data.errMsg);
                return true;
            }
        },
        error:function(){
            alert("系统异常，请稍后重试");
            return false;
        }
    });
    return true;
}
$(function(){
    if(!checkUserName($("#userName").val().trim())){return ;}
    $("form").submit();
});