JS中异步请求无法返回给方法正确的布尔值 - 解决方案

落日映苍穹つ 2023-02-15 15:55 96阅读 0赞

### JS中异步请求无法返回给方法正确的布尔值 - 解决方案 ###

*   *   *  1. 问题现象
         *  2. 解决方案 1：改变 async 为临时同步 + 变量赋值
         *  3. 解决方案 2：使用全局变量 + 写 get/set 方法
         *  4. demo 源码

### 1. 问题现象 ###

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3NpbmF0XzM2MTg0MDc1_size_16_color_FFFFFF_t_70]  
普通的 ajax 校验会出现的问题：`无法正确返回 boolean 值 false，因此无法正确拦截表单提交！！！`

// 普通的 ajax 异步请求（校验用户名是否与数据库中重复）
    	$.ajax({ 
    		type : "post",
    		async : true,
    		url : "<%=request.getContextPath()%>/validateLogin", // 查重 Servlet
    		data : { 
    			"username" : name
    		},
    		success : function(data) { 
    			console.log("data:" + data + ", type:" + (typeof data));
    			// 与 登陆逻辑正好相反，false 用户不存在, true 用户存在（不能注册） 
    			if (data == false) { 
    				nameSpan.innerHTML = "√".fontcolor("green");
    				result = true;
    			} else { 
    				nameSpan.innerHTML = "用户名已存在".fontcolor("red");
    				result = false;
    			}
    		},
    		dataType: "json",
    	});

因此，当下的需求非常明确：  
如何在 ajax 异步请求回调函数 function(data) 中正确获取一个返回值，用于表单的提交 / 拦截。

进一步研究验证，解决方案有 两种：

*  方式1：`将 ajax 作为临时同步的校验事件，可正确赋值需要的返回值`
 *  方式2：`使用自定义 get/set 方法确保操作的是永远是同一个 变量` (即需要正确赋值的返回值)

### 2. 解决方案 1：改变 async 为临时同步 + 变量赋值 ###

jQuery.ajax() 参数：`async`

*  类型：Boolean
 *  默认值: true。默认不带 async 参数时，所有请求均为异步请求。显式设置为 false 则为同步请求。
 *  注意，同步请求将锁住浏览器，用户其它操作必须等待请求完成才可以执行。

// 方式1：将 ajax 作为临时同步的校验事件，可正确赋值需要的返回值 result
    function checkStuName1() { 
    	// 如果 id 标签不存在，id === undefined，且不能直接操作 .value
    	var id = document.getElementsByName("stuId")[0];
    	var name = document.getElementsByName("username")[0].value;
    	var nameSpan = document.getElementById("nameSpan");
    	
    	console.log("id:" + id + ", " + "name:" + name);
    	if (null === name || "" === name) { 
    		nameSpan.innerHTML = "* 用户名不能为空".fontcolor("red");
    		return false;
    	}
    
    	var result;
    	if (undefined === id || null === id || "" === id) { 
    		// 注册
    		$.ajax({ 
    			type : "post",
    			async : false, // 转为同步请求 + result变量
    			url : "<%=request.getContextPath()%>/validateLogin",
    			data : { 
    				"username" : name
    			},
    			success : function(data) { 
    				console.log("data:" + data + ", type:" + (typeof data));
    				// 与 登陆逻辑正好相反，false 用户不存在, true 用户存在（不能注册） 
    				if (data == false) { 
    					nameSpan.innerHTML = "√".fontcolor("green");
    					result = true;
    				} else { 
    					nameSpan.innerHTML = "用户名已存在".fontcolor("red");
    					result = false;
    				}
    			},
    			dataType: "json",
    		});
    	} else { 
    		// id 不为空：修改操作
    		console.log("修改操作");
    		result = false;
    	}
    	return result;
    }

### 3. 解决方案 2：使用全局变量 + 写 get/set 方法 ###

// 方式2：使用自定义 get/set 方法确保操作的是永远是同一个 flag (即需要正确赋值的返回值)
    var flag = false;
    function getFlag() { 
    	return flag;
    }
    function setFlag(b) { 
    	flag = b;
    }
    function checkStuName2() { 
    	// 如果 id 标签不存在，id === undefined，且不能直接操作 .value
    	var id = document.getElementsByName("stuId")[0];
    	var name = document.getElementsByName("username")[0].value;
    	var nameSpan = document.getElementById("nameSpan");
    	
    	console.log("id:" + id + ", " + "name:" + name);
    	if (null === name || "" === name) { 
    		nameSpan.innerHTML = "* 用户名不能为空".fontcolor("red");
    		return false;
    	}
    
    	if (undefined === id || null === id || "" === id) { 
    		// 注册
    		$.post("<%=request.getContextPath()%>/validateLogin", { 
    			"username": name
    		}, function(data) { 
    			console.log("data:" + data + ", type:" + (typeof data));
    			// 与 登陆逻辑正好相反，true 用户存在 false 用户不存在
    			if (data == true) { 
    				nameSpan.innerHTML = "用户名已存在".fontcolor("red");
    				setFlag(false);
    			} else { 
    				nameSpan.innerHTML = "√".fontcolor("green");
    				setFlag(true);
    			}
    		}, "json");
    	} else { 
    		// 修改
    		console.log("修改操作");
    	}
    	console.log("最终flag=" + getFlag());
    	return getFlag();
    }

### 4. demo 源码 ###

<%@ page language="java" contentType="text/html; charset=UTF-8"
        pageEncoding="UTF-8"%>
    <%@ taglib uri="http://java.sun.com/jsp/jstl/core"  prefix="c"%>
    <!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="UTF-8">
    		<title>注册/修改页</title>
    		<script src="${pageContext.request.contextPath}/js/jquery-3.5.1.min.js"></script>
    		<script type="text/javascript"> function show(file) { var reader = new FileReader(); // 实例化一个FileReader对象，用于读取文件 var img = document.getElementById('img'); // 获取要显示图片的标签 //读取File对象的数据 reader.onload = function(evt) { img.width = "50"; img.height = "50"; img.src = evt.target.result; } reader.readAsDataURL(file.files[0]); } // 方式1：将 ajax 作为临时同步的校验事件，可正确赋值需要的返回值 result function checkStuName1() { // 如果 id 标签不存在，id === undefined，且不能直接操作 .value var id = document.getElementsByName("stuId")[0]; var name = document.getElementsByName("username")[0].value; var nameSpan = document.getElementById("nameSpan"); console.log("id:" + id + ", " + "name:" + name); if (null === name || "" === name) { nameSpan.innerHTML = "* 用户名不能为空".fontcolor("red"); return false; } var result; if (undefined === id || null === id || "" === id) { // 注册 $.ajax({ type : "post", async : false, // 转为同步请求 + result变量 url : "<%=request.getContextPath()%>/validateLogin", data : { "username" : name }, success : function(data) { console.log("data:" + data + ", type:" + (typeof data)); // 与 登陆逻辑正好相反，false 用户不存在, true 用户存在（不能注册） if (data == false) { nameSpan.innerHTML = "√".fontcolor("green"); result = true; } else { nameSpan.innerHTML = "用户名已存在".fontcolor("red"); result = false; } }, dataType: "json", }); } else { // id 不为空：修改操作 console.log("修改操作"); result = false; } return result; } // 方式2：使用自定义 get/set 方法确保操作的是永远是同一个 flag (即需要正确赋值的返回值) var flag = false; function getFlag() { return flag; } function setFlag(b) { flag = b; } function checkStuName2() { // 如果 id 标签不存在，id === undefined，且不能直接操作 .value var id = document.getElementsByName("stuId")[0]; var name = document.getElementsByName("username")[0].value; var nameSpan = document.getElementById("nameSpan"); console.log("id:" + id + ", " + "name:" + name); if (null === name || "" === name) { nameSpan.innerHTML = "* 用户名不能为空".fontcolor("red"); return false; } if (undefined === id || null === id || "" === id) { // 注册 $.post("<%=request.getContextPath()%>/validateLogin", { "username": name }, function(data) { console.log("data:" + data + ", type:" + (typeof data)); // 与 登陆逻辑正好相反，true 用户存在 false 用户不存在 if (data == true) { nameSpan.innerHTML = "用户名已存在".fontcolor("red"); setFlag(false); } else { nameSpan.innerHTML = "√".fontcolor("green"); setFlag(true); } }, "json"); } else { // 修改 console.log("修改操作"); } console.log("最终flag=" + getFlag()); return getFlag(); } // 校验返回 function checkAll() { //return checkStuName1(); return checkStuName2(); } </script>
    	</head>
    	<body>
    		<form action="<%=request.getContextPath()%>/addOrUpdate" method="post" enctype="multipart/form-data" onsubmit="return checkAll()">
    			<table>
    				<c:if test="${null != stuData.stuId}">
    					<tr>
    						<td>编号</td>
    						<td>
    							<input type="text" name="stuId" readonly="readonly" value="${stuData.stuId}">
    						</td>
    						<td></td>
    					</tr>
    				</c:if>
    
    				<tr>
    					<td>姓名</td>
    					<td>
    						<input type="text" name="username" value="${stuData.stuName}" onblur="checkStuName2()">
    					</td>
    					<td><span id="nameSpan"></span></td>
    				</tr>
    				<tr>
    					<td>年龄</td>
    					<td>
    						<input type="text" name="age" value="${stuData.stuAge}">
    					</td>
    					<td></td>
    				</tr>
    				<tr>
    					<td>爱好</td>
    					<td>
    						<input type="text" name="hobby" value="${stuData.stuHobby}">
    					</td>
    					<td></td>
    				</tr>
    				<tr>
    					<td>班级</td>
    					<td>
    						<select name="grade">
    							<option value="1" <c:if test="${stuData.gId==1}">selected</c:if>>zz2001</option>
    							<option value="2" <c:if test="${stuData.gId==2}">selected</c:if>>zz2002</option>
    							<option value="3" <c:if test="${stuData.gId==3}">selected</c:if>>zz2003</option>
    							<option value="4" <c:if test="${stuData.gId==4}">selected</c:if>>zz2004</option>
    							<option value="5" <c:if test="${stuData.gId==5}">selected</c:if>>zz2005</option>
    						</select>
    					</td>
    					<td></td>
    				</tr>
    				<tr>
    					<td>密码</td>
    					<td><input type="password" name="password" value="${stuData.pwd}"></td>
    					<td></td>
    				</tr>
    				<tr>
    					<td>生日</td>
    					<td><input type="date" name="birthday" value="${stuData.stuBirthday}"></td>
    					<td></td>
    				</tr>
    				<tr>
    					<td>头像</td>
    					<td>
    						<c:choose>
    							<c:when test="${not empty stuData.imgPath}">
    								<img id="img" height="50px" width="50px" alt="有头像" src="http://localhost:8081/uploadfile/images/${stuData.imgPath}">
    							</c:when>
    							<c:otherwise>
    								<img id="img" height="50px" width="50px" alt="有头像" src="<%=request.getContextPath()%>/img/default.png">
    							</c:otherwise>
    						</c:choose>
    					</td>
    					<td>
    						<input type="file" name="imgPath" onchange="show(this)">
    					</td>
    				</tr>
    			</table>
    			<input type="submit" value="注册">
    			<input type="reset" value="重置">
    		</form>
    
    	</body>
    </html>

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3NpbmF0XzM2MTg0MDc1_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20200606142921842.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3NpbmF0XzM2MTg0MDc1,size_16,color_FFFFFF,t_70