问题描述:
仍然在表单中，像往常一样，异步获取表单内所有输入框的信息，点击提交，确实也走了后台，但是结果却走了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按钮。
来源：https://www.cnblogs.com/youcong/p/9275678.html