ajax进行异步请求，在方法内返回数据无效的问题解决

最近在学习的时候，使用ajax校验用户名是否重复，在前端使用ajax请求进行用户名重复的检查。在success执行的方法内是进行判断，并赋值true和false给定义好的变量flag。在使用alert打印flag的值时都为false。原本代码如下：

                //校验用户名是否重复
		function validate_empName_repeat(){
			var empName=$("#empName_add_input").val();
			var flag=false;
			$.ajax({
				url:"${APP_PATH}/checkEmpName",
				type:"POST",
				data:"empName="+empName,
				success:function(result){
					if(!result.extend.success){
						show_validate_msg("#empName_add_input","failure","已存在名字为 "+empName+" 的用户，请使用其他用户名");
						flag= false;
					}else{
						flag= true;
					}
				}
			});
			return flag;
		}

show_validate_msg方法只是用于显示提示信息。结果如下（很确定了我输入的数据一定是数据库中不存在的）：

通过查询资料发现，原来是因为异步请求的原理是，在ajax执行期间，js代码会继续执行直到最终的return语句。并不会等待ajax请求结束后才往下执行。最终return的的flag值为就可能为true，也可能为false。用一句代码测试如下：

alert("校验用户名"+validate_empName_repeat());

 

所以总结下来发现，返回数据和打印数据有时候是不一致的。非常容易对初学者造成困扰。针对这种情况，在ajax请求内加上一句代码，即可保证打印数据和请求数据一一致了。

修改后代码如下：async:false,

                //校验用户名是否重复
		function validate_empName_repeat(){
			var empName=$("#empName_add_input").val();
			var flag=false;
			$.ajax({
				async:false,
				url:"${APP_PATH}/checkEmpName",
				type:"POST",
				data:"empName="+empName,
				success:function(result){
					if(!result.extend.success){
						show_validate_msg("#empName_add_input","failure","已存在名字为 "+empName+" 的用户，请使用其他用户名");
						flag= false;
					}else{
						flag= true;
					}
				}
			});
			alert("校验用户名时打印的数据："+flag);
			return flag;
		}

再次测试，结果如下：