jQery Ajax 执行顺序-优快云博客

本文介绍了一个使用jQuery发起的Ajax同步请求案例，详细解释了如何确保前端校验逻辑正确执行，避免因异步特性导致的数据提交错误。通过设置async参数为false实现同步请求，确保表单提交前完成服务器数据校验。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

2019独角兽企业重金招聘Python工程师标准>>>

项目中，经常需使用到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();
});

转载于:https://my.oschina.net/skyAcross/blog/686875