问题描述:
仍然在表单中，像往常一样，异步获取表单内所有输入框的信息，点击提交，确实也走了后台，但是结果却走了ajax的error。
这一点使我当时非常疑惑，为什么会走error呢？
一般走error的原因如下：
(1)不能正确访问URL;
(2)请求类型有误;
(3)参数有误;
(4)传到后台的URL导致某种异常，从而导致ajax走error
(5)请求参数类型有误，比如要传json，你却传了xml等，也会导致error；
以上是我之前遇到的导致ajax走error的原因。
今天这个error非常奇怪，正常走URL,后台参数传到了，没有报错，但是就是走error。
浏览器 f12+f5调试无报错，正常情况下,ajax报error，还有就是你的html文件中某个js有误，js是一个非常爱发票脾气的女孩，心情不好(指的是只要一个页面用到了js，页面中某个js存在问题，通常会影响页面其他代码，从而导致整体受到影响，出现问题)，页面就不行了(页面不行了的意思是说:一旦页面中某个js出现问题，会导致其他部分js与后台交互渲染数据就会出现问题)。
这就是我国古代常说的,"牵其一，必动其余"。
所以前后端开发用js的要特别仔细小心，稍不如意，就会导致殃及池鱼。
最后解决办法:我将async改为false,意为同步，通常情况下,axync默认是true,意为异步的。
果然改了之后就好了，正常返回数据，将async去掉却发现又变成那样了，最后我只能初步的判断是这个原因导致的。
该界面使用了layui框架+metronic相关的组件
下面是我的js代码
//登录功能函数 var handleSignInFormSubmit = function() { $('#m_login_signin_submit').click(function() { //手机号 var username = $("#username").val(); //密码 var password = $("#password").val(); //手机号验证正则表达式 var myreg=/^[1][3,4,5,7,8][0-9]{9}$/; if(username==null||username==""){ layui.use('layer', function(){ var layer = layui.layer; layer.alert("请输入手机号",{icon:5}); }); return false; }else if(!myreg.test(username)){ layui.use('layer', function(){ var layer = layui.layer; layer.alert("无效手机号",{icon:5}); }); return false; }else if(password==null||password==""){ layui.use('layer', function(){ var layer = layui.layer; layer.alert("请输入密码",{icon:5}); }); return false; }else if(password.length<6||password.length>16){ layui.use('layer', function(){ var layer = layui.layer; layer.alert("密码不能小于6位或大于16位",{icon:5}); }); return false; }else{ $.ajax({ async:false, url:ZL.url.api.login, type:"POST", data : {"username":username,"password":password}, dataType : 'json', success:function(data){ if(data.returnCode=="000000"){ layui.use('layer', function(){ var layer = layui.layer; layer.alert(data.returnMsg,{icon:1}); }); setTimeout(() => { window.location.href= "index.html"; }, 1000); return true; }else if(data.returnCode="111111"){ layui.use('layer', function(){ var layer = layui.layer; layer.alert(data.returnMsg,{icon:5}); }); return false; }else if(data.returnCode="222222"){ layui.use('layer', function(){ var layer = layui.layer; layer.alert(data.returnMsg,{icon:5}); }); return false; }else if(data.returnCode="500"){ layui.use('layer', function(){ var layer = layui.layer; layer.alert(data.returnMsg,{icon:5}); }); return false; } },error:function(XMLHttpRequest, textStatus, errorThrown){ alert("失败"+username+"||"+password); // 状态码 alert(XMLHttpRequest.status); // 状态 alert(XMLHttpRequest.readyState); // 错误信息 alert(textStatus); return false; } }); } }); }
另外深入了分析了下，应该也是和form有关的，但是我仍然像往常那样form的action去掉或者让它等于'#'，防止影响ajax正常请求数据。
但是也是无济于事，最后我新建一个test.html，将ajax的代码复制过去，却发现正常运行。
最后我只能用这个结论来概述:
我这个登录界面涉及到metronic的较多组件，同时，最初情况下，metronic用的ajax请求代码如下:
var handleSignInFormSubmit = function() {
$('#m_login_signin_submit').click(function(e) {
e.preventDefault();
var btn = $(this);
var form = $(this).closest('form');
form.validate({
rules: {
email: {
required: true,
email: true
},
password: {
required: true
}
}
});
if (!form.valid()) {
return;
}
btn.addClass('m-loader m-loader--right m-loader--light').attr('disabled', true);
form.ajaxSubmit({
url: 'ZL.url.api.login
success: function(response, status, xhr, $form) {
// similate 2s delay
setTimeout(function() {
btn.removeClass('m-loader m-loader--right m-loader--light').attr('disabled', false);
showErrorMsg(form, 'danger', 'Incorrect username or password. Please try again.');
}, 2000);
}
});
});
}
说到ajaxSubmit就不能不提到ajaxForm,两者有如下区别:
(1)ajaxForm不能主动提交form，函数只是为提交表单而做,需要以submit来触发提交。
(2)ajaxSubmit会主动提交表单，同时还可以在点击其他按钮时，例如button之类的，也可以触发提交，但不一定是submit按钮。
