100字范文 > form 表单提交时用ajax异步请求导致ajax请求结果无法接收问题

form 表单提交时用ajax异步请求导致ajax请求结果无法接收问题

时间：2022-11-28 00:34:54

1、背景描述，有个公司内部用的小系统，不想大动干戈用太多前端框架，就用HTML5写了个登陆页面，刚开始想着用form表单提交登陆账户信息。后来因为前后端分离，并且统一用ajax调用后台服务交互数据，因此在form表单提交的方法中加了ajax异步调用后台服务验证登陆信息。

2、问题，在登陆功能测试时，偶尔出现点登陆按钮后，页面跳转并重新加载后无反应(控制台没有报错,后台服务正常)，前端ajax调用成功后方法打了断点也没进入，再点登陆按钮几次又能正常登陆。

3、解决，经过测试为form表单提交并刷新页面后，ajax异步请求结果还没有接收到，导致ajax调用成功后方法没有执行。所以能感觉到页面刷新了一下(因为URL后面多了个"？"号)，但没有登陆成功，也没有报错。最后去掉form表单问题解决。

登陆失败多了个"?"号

修改正确后代码：

<!DOCTYPE html><html lang="zh"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><link rel="shortcut icon" href="favicon.ico" type="image/x-icon" /><link rel="icon" sizes="any" mask href="favicon.ico"><title>登陆页面</title><style>*{margin:0;padding:0;}body{margin:0 auto;background-color:#E7FBFA;}#loginDiv{margin:0 auto;background-color:#E7FBFA;background-size:1024px 567px;min-width:824px;min-height:600px;}#divForm, form{margin:0 auto;/* display:block; *//* border:1px solid #303a40; *//* padding: 200px 0 0 390px; */min-width:434px;min-height:400px;}ul{margin:40px auto 10px auto;}li{list-style:none;height:30px;text-align: center;margin-bottom:10px;}li span{display: block;color:#ff6633;font-size: 12px;}.error-border{border:1px solid #ff6633;}.success-border{border:1px solid #BBB;/*2eff37*/}.username, .password{padding:0 0 0 10px;color:#666;width:200px;height: 30px;/* border:1px solid #BBB; */}.username:focus, .password:focus {outline: none;border-color: #4488F9;}::-webkit-input-placeholder { /* WebKit, Blink, Edge */ color: #BBB; font-size:14px}:-moz-placeholder { /* Mozilla Firefox 4 to 18 */ color: #BBB; font-size:14px}::-moz-placeholder { /* Mozilla Firefox 19+ */ color: #BBB; font-size:14px}:-ms-input-placeholder { /* Internet Explorer 10-11 */ color: #BBB; font-size:14px}.saveAccounts{margin:0 auto;padding:0;width:200px;height: 16px;font-size: 12px;color:#BBB;}.saveAccounts input[type=checkbox] {cursor: pointer;position: relative;border:1px solid #BBB;background-color:rgba(0,0,0,0);color:#BBB;height: 16px;padding:0;margin:0;vertical-align:top;}.saveAccounts input[type=checkbox]::after {position: absolute;top: 0;background-color: #fff;color: #fff;width: 14px;height: 14px;display: inline-block;visibility: visible;padding-left: 0px;text-align: center;content: ' ';border-radius: 2px;box-sizing: border-box;border: 1px solid #ddd;}.saveAccounts input[type=checkbox]:checked::after {content: "";background-color: #037DF3;border-color: #037DF3;background-color: #037DF3;}.saveAccounts input[type=checkbox]:checked::before {content: '';position: absolute;top: 1px;left: 5px;width: 3px;height: 8px;border: solid white;border-width: 0 2px 2px 0;transform: rotate(45deg);z-index: 1;}.loginTips{margin:0 auto;width:200px;height: 25px;color:#ff0000;}.submit{margin:0 auto;width:200px;height: 25px;text-align: center;background-color: #0066FF;padding:17px 0 0 0;}.submit input{color:#fff;font-size:14px;border-style:none;margin:0 auto;width: 200px;height: 25px;text-align: center;background-color:rgba(0,0,0,0);}</style></head><body><div id="loginDiv"><div id="divForm"><ul class='logging'><li><input class="username success-border" type="text" placeholder="请输入帐号" onfocus="focusFun(this)" onblur="blurFun(this)" maxlength="11"></li><li><input class="password success-border" type="password" placeholder="请输入密码"></li></ul><div class="saveAccounts"><input type="checkbox" id="saveInput" title="记住密码" checked="checked" onClick="saveCook()"/> 记住密码</div><div class="loginTips"><span class="loginTipsSpan"></span></div><div class="submit"><input id="submit" type="submit" value="登   录"></div></div></div><script src="/jquery-3.6.0.min.js"></script><script>var request_url = 'http://127.0.0.1:8009/test';function getCookie(cname){var name = cname + "=";var ca = document.cookie.split(';');for(var i=0; i<ca.length; i++) {var c = ca[i].trim();if (c.indexOf(name)==0) return c.substring(name.length,c.length);}return "";}function setCookie(cname,cvalue,exdays){var d = new Date();d.setTime(d.getTime()+(exdays*24*60*60*1000));var expires = "expires="+d.toGMTString();document.cookie = cname+"="+cvalue+"; "+expires;}//请求数据function httpRequestData(url,inSendData,callBack){//创建一个 XMLHTTPRequest 类型对象var xhr = null;if (window.XMLHttpRequest) {//标准浏览器xhr = new window.XMLHttpRequest;} else {//IE浏览器 xhr = new ActiveXObject("Microsoft.XMLHTTP");}xhr.onreadystatechange = success;//open()方法开启请求xhr.open("POST", url, true); //请求的类型GET POST; true异步（默认） false同步//post请求要自己设置请求头xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");//发送表单数据//xhr.setRequestHeader("Content-type", "application/json"); //发送json格式数据//xhr.setRequestHeader("Content-type","application/json;charset=utf-8"); //发送json格式数据//xhr.setRequestHeader("Content-type", "text/plain;charset=utf-8");发送纯文本//xhr.setRequestHeader("Content-type", "text/html;charset=utf-8");发送html文本//xhr.send(JSON.stringify(inSendData).replace(/\s+/g,""));//xhr.send(JSON.stringify(inSendData));xhr.send(inSendData);//xhr.send(null);function success() {if (xhr.readyState == 4) { //回传成功if(xhr.status == 200){//console.info(xhr.responseText);console.log('network success.');callBack(xhr);//return true;}else{console.log("Problem retrieving XML data");//return true;}}//else {//console.log('network error.');//return false;//}}}function focusFun(point){//触发焦点，若输入的值跟默认值一样，输入的值为空if(point.defaultValue == point.value){point.value = '';}}function blurFun(point){//失去焦点时，若值为空，则值等于默认值，也就是placeholderif(point.value == ''){point.value = point.defaultValue;}}function saveCook(){//取消记住密码，则删除if(!document.getElementById("saveInput").checked){// 删除cookiesetCookie('un', '', 0);setCookie('pw', '', 0);}setCookie('cc', document.getElementById("saveInput").checked, 365);}function checkLogin(un,pwd) {//var sendData = "{'login':'"+un+"','pass':'"+pwd+"'}";var sendData = "login="+un+"&pass="+pwd;httpRequestData(request_url + '/login/getUserInfo',sendData,addInfo);};function submitForm(){if(document.getElementById("saveInput").checked){setCookie('un', $('.username').val(),365);setCookie('pw', $('.password').val(),365);}setCookie('cc', document.getElementById("saveInput").checked,365);checkLogin($('.username').val(),$('.password').val());}function addInfo(xhr){var returnVaule = $.parseJSON(xhr.responseText);console.log(returnVaule);if(returnVaule.code===0){if(returnVaule.hasOwnProperty("data")){if(returnVaule.data===""){$('.loginTipsSpan').html('登陆失败!输入用户名或密码错误!!!');}else{setCookie('loginState', '1', 365);setCookie('uname', returnVaule.data.name, 365);console.log('登陆成功！');window.location.href = "main.html";}}else{$('.loginTipsSpan').html('登陆失败!输入用户名或密码错误!!!');}}else{$('.loginTipsSpan').html('登陆失败!输入用户名或密码错误!!!');}}$(function(){//若验证正确，则为true,最后判断是否能提交var isPwd = falsevar isUser = false;$(document).ready(function(){var user = getCookie("un");var pwd = getCookie("pw");var cc = getCookie("cc");// 判断是否存在cookieif (user) {$('.username').val(user);isPwd = true;$('.password').val(pwd);isUser = true;}if (cc=='false') {document.getElementById("saveInput").checked = "";}else {document.getElementById("saveInput").checked = "checked";}})$('.username').blur(function(){//正则表达式，验证用户名//用户名要1开头，第二位是3或4或5或6，最后一位以8或9结束，一共要11位//reg=/^1[3|4|5|6][0-9]\d{8,9}$/i;if($(this).val() == '' || $(this).val() == '请输入您的账号'){$('.username').addClass('error-border');$('.loginTipsSpan').html('账户不能为空!!!');$(this).removeClass('success-border');isPwd = false;}//else if($('.username').val().length < 11){// $('.loginTipsSpan').html('长度错误!!!');// $('.username').addClass('error-border');//}//else if(!reg.test($('.username').val())){// $('.loginTipsSpan').html('账户不存在!!!');// $('.username').addClass('error-border');//}else{$('.username').removeClass('error-border');$('.username').addClass('success-border');$('.loginTipsSpan').html('');isUser = true;}});$('.password').blur(function(){//密码要a-z(大小写),1-9，总共6-22位//正则可以先了解//reg=/^[\@A-Za-z0-9\!\#\$\%\^\&\*\.\~]{6,22}$/;if($(this).val() == ''){$(this).addClass('error-border');$('.loginTipsSpan').html('密码不能为空!!!');$(this).removeClass('success-border');isPwd = false;}//else if(!reg.test($(this).val())){// $(this).addClass('error-border');// $('.loginTipsSpan').html('密码格式不对!!!');//}else{$(this).addClass('success-border');$(this).removeClass('error-border');$('.loginTipsSpan').html('');isPwd = true;}});//$('form').submit(function(){$('#submit').click(function(){$('.loginTipsSpan').html('');//用户名密码验证通过则提交，验证不通过不提交if(isPwd && isUser){submitForm();//alert('提交成功！')//return true;}else{if(!($('.username').val() == '' || $('.username').val() == '请输入您的账号')&&($('.password').val() != '')){submitForm();}else{$('.loginTipsSpan').html('用户名或密码不能为空!!!');setCookie('cc', document.getElementById("saveInput").checked,365);//return false;}}})})</script></body></html>

有问题代码：

<!DOCTYPE html><html lang="zh"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><link rel="shortcut icon" href="favicon.ico" type="image/x-icon" /><link rel="icon" sizes="any" mask href="favicon.ico"><title>登陆页面</title><style>*{margin:0;padding:0;}body{margin:0 auto;background-color:#E7FBFA;}#loginDiv{margin:0 auto;background-color:#E7FBFA;background-size:1024px 567px;min-width:824px;min-height:600px;}form{margin:0 auto;/* display:block; *//* border:1px solid #303a40; *//* padding: 200px 0 0 390px; */min-width:434px;min-height:400px;}ul{margin:40px auto 10px auto;}li{list-style:none;height:30px;text-align: center;margin-bottom:10px;}li span{display: block;color:#ff6633;font-size: 12px;}.error-border{border:1px solid #ff6633;}.success-border{border:1px solid #BBB;/*2eff37*/}.username, .password{padding:0 0 0 10px;color:#666;width:200px;height: 30px;/* border:1px solid #BBB; */}.username:focus, .password:focus {outline: none;border-color: #4488F9;}::-webkit-input-placeholder { /* WebKit, Blink, Edge */ color: #BBB; font-size:14px}:-moz-placeholder { /* Mozilla Firefox 4 to 18 */ color: #BBB; font-size:14px}::-moz-placeholder { /* Mozilla Firefox 19+ */ color: #BBB; font-size:14px}:-ms-input-placeholder { /* Internet Explorer 10-11 */ color: #BBB; font-size:14px}.saveAccounts{margin:0 auto;padding:0;width:200px;height: 16px;font-size: 12px;color:#BBB;}.saveAccounts input[type=checkbox] {cursor: pointer;position: relative;border:1px solid #BBB;background-color:rgba(0,0,0,0);color:#BBB;height: 16px;padding:0;margin:0;vertical-align:top;}.saveAccounts input[type=checkbox]::after {position: absolute;top: 0;background-color: #fff;color: #fff;width: 14px;height: 14px;display: inline-block;visibility: visible;padding-left: 0px;text-align: center;content: ' ';border-radius: 2px;box-sizing: border-box;border: 1px solid #ddd;}.saveAccounts input[type=checkbox]:checked::after {content: "";background-color: #037DF3;border-color: #037DF3;background-color: #037DF3;}.saveAccounts input[type=checkbox]:checked::before {content: '';position: absolute;top: 1px;left: 5px;width: 3px;height: 8px;border: solid white;border-width: 0 2px 2px 0;transform: rotate(45deg);z-index: 1;}.loginTips{margin:0 auto;width:200px;height: 25px;color:#ff0000;}.submit{margin:0 auto;width:200px;height: 25px;text-align: center;background-color: #0066FF;padding:17px 0 0 0;}.submit input{color:#fff;font-size:14px;border-style:none;margin:0 auto;width: 200px;height: 25px;text-align: center;background-color:rgba(0,0,0,0);}</style></head><body><div id="loginDiv"><form action=""><ul class='logging'><li><input class="username success-border" type="text" placeholder="请输入帐号" onfocus="focusFun(this)" onblur="blurFun(this)" maxlength="11"></li><li><input class="password success-border" type="password" placeholder="请输入密码"></li></ul><div class="saveAccounts"><input type="checkbox" id="saveInput" title="记住密码" checked="checked" onClick="saveCook()"/> 记住密码</div><div class="loginTips"><span class="loginTipsSpan"></span></div><div class="submit"><input id="submit" type="submit" value="登   录"></div></form></div><script src="/jquery-3.6.0.min.js"></script><script>var request_url = 'http://127.0.0.1:8009/test';function getCookie(cname){var name = cname + "=";var ca = document.cookie.split(';');for(var i=0; i<ca.length; i++) {var c = ca[i].trim();if (c.indexOf(name)==0) return c.substring(name.length,c.length);}return "";}function setCookie(cname,cvalue,exdays){var d = new Date();d.setTime(d.getTime()+(exdays*24*60*60*1000));var expires = "expires="+d.toGMTString();document.cookie = cname+"="+cvalue+"; "+expires;}//请求数据function httpRequestData(url,inSendData,callBack){//创建一个 XMLHTTPRequest 类型对象var xhr = null;if (window.XMLHttpRequest) {//标准浏览器xhr = new window.XMLHttpRequest;} else {//IE浏览器 xhr = new ActiveXObject("Microsoft.XMLHTTP");}xhr.onreadystatechange = success;//open()方法开启请求xhr.open("POST", url, true); //请求的类型GET POST; true异步（默认） false同步//post请求要自己设置请求头xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");//发送表单数据//xhr.setRequestHeader("Content-type", "application/json"); //发送json格式数据//xhr.setRequestHeader("Content-type","application/json;charset=utf-8"); //发送json格式数据//xhr.setRequestHeader("Content-type", "text/plain;charset=utf-8");发送纯文本//xhr.setRequestHeader("Content-type", "text/html;charset=utf-8");发送html文本//xhr.send(JSON.stringify(inSendData).replace(/\s+/g,""));//xhr.send(JSON.stringify(inSendData));xhr.send(inSendData);//xhr.send(null);function success() {if (xhr.readyState == 4) { //回传成功if(xhr.status == 200){//console.info(xhr.responseText);console.log('network success.');callBack(xhr);//return true;}else{console.log("Problem retrieving XML data");//return true;}}//else {//console.log('network error.');//return false;//}}}function focusFun(point){//触发焦点，若输入的值跟默认值一样，输入的值为空if(point.defaultValue == point.value){point.value = '';}}function blurFun(point){//失去焦点时，若值为空，则值等于默认值，也就是placeholderif(point.value == ''){point.value = point.defaultValue;}}function saveCook(){//取消记住密码，则删除if(!document.getElementById("saveInput").checked){// 删除cookiesetCookie('un', '', 0);setCookie('pw', '', 0);}setCookie('cc', document.getElementById("saveInput").checked, 365);}function checkLogin(un,pwd) {//var sendData = "{'login':'"+un+"','pass':'"+pwd+"'}";var sendData = "login="+un+"&pass="+pwd;httpRequestData(request_url + '/login/getUserInfo',sendData,addInfo);};function submitForm(){if(document.getElementById("saveInput").checked){setCookie('un', $('.username').val(),365);setCookie('pw', $('.password').val(),365);}setCookie('cc', document.getElementById("saveInput").checked,365);checkLogin($('.username').val(),$('.password').val());}function addInfo(xhr){var returnVaule = $.parseJSON(xhr.responseText);console.log(returnVaule);if(returnVaule.code===0){if(returnVaule.hasOwnProperty("data")){if(returnVaule.data===""){$('.loginTipsSpan').html('登陆失败!输入用户名或密码错误!!!');}else{setCookie('loginState', '1', 365);setCookie('uname', returnVaule.data.name, 365);console.log('登陆成功！');window.location.href = "main.html";}}else{$('.loginTipsSpan').html('登陆失败!输入用户名或密码错误!!!');}}else{$('.loginTipsSpan').html('登陆失败!输入用户名或密码错误!!!');}}$(function(){//若验证正确，则为true,最后判断是否能提交var isPwd = falsevar isUser = false;$(document).ready(function(){var user = getCookie("un");var pwd = getCookie("pw");var cc = getCookie("cc");// 判断是否存在cookieif (user) {$('.username').val(user);isPwd = true;$('.password').val(pwd);isUser = true;}if (cc=='false') {document.getElementById("saveInput").checked = "";}else {document.getElementById("saveInput").checked = "checked";}})$('.username').blur(function(){//正则表达式，验证用户名//用户名要1开头，第二位是3或4或5或6，最后一位以8或9结束，一共要11位//reg=/^1[3|4|5|6][0-9]\d{8,9}$/i;if($(this).val() == '' || $(this).val() == '请输入您的账号'){$('.username').addClass('error-border');$('.loginTipsSpan').html('账户不能为空!!!');$(this).removeClass('success-border');isPwd = false;}//else if($('.username').val().length < 11){// $('.loginTipsSpan').html('长度错误!!!');// $('.username').addClass('error-border');//}//else if(!reg.test($('.username').val())){// $('.loginTipsSpan').html('账户不存在!!!');// $('.username').addClass('error-border');//}else{$('.username').removeClass('error-border');$('.username').addClass('success-border');$('.loginTipsSpan').html('');isUser = true;}});$('.password').blur(function(){//密码要a-z(大小写),1-9，总共6-22位//正则可以先了解//reg=/^[\@A-Za-z0-9\!\#\$\%\^\&\*\.\~]{6,22}$/;if($(this).val() == ''){$(this).addClass('error-border');$('.loginTipsSpan').html('密码不能为空!!!');$(this).removeClass('success-border');isPwd = false;}//else if(!reg.test($(this).val())){// $(this).addClass('error-border');// $('.loginTipsSpan').html('密码格式不对!!!');//}else{$(this).addClass('success-border');$(this).removeClass('error-border');$('.loginTipsSpan').html('');isPwd = true;}});$('form').submit(function(){$('.loginTipsSpan').html('');//用户名密码验证通过则提交，验证不通过不提交if(isPwd && isUser){submitForm();//alert('提交成功！')//return true;}else{if(!($('.username').val() == '' || $('.username').val() == '请输入您的账号')&&($('.password').val() != '')){submitForm();}else{$('.loginTipsSpan').html('用户名或密码不能为空!!!');setCookie('cc', document.getElementById("saveInput").checked,365);//return false;}}})})</script></body></html>

本内容不代表本网观点和政治立场，如有侵犯你的权益请联系我们处理。

网友评论

网友评论仅供其表达个人看法，并不表明网站立场。