jQery 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中文文档所说：

解决此问题的办法只须要在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();
});