记一次ajax交互问题

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