记一次ajax交互问题

发布时间：2020-12-16 03:03:34 所属栏目：百科来源：网络整理

导读：问题描述: 仍然在表单中，像往常一样，异步获取表单内所有输入框的信息，点击提交，确实也走了后台，但是结果却走了ajax的error。这一点使我当时非常疑惑，为什么会走error呢？一般走error的原因如下： (1)不能正确访问URL; (2)请求类型有误; (3)参数有误;

问题描述:
仍然在表单中，像往常一样，异步获取表单内所有输入框的信息，点击提交，确实也走了后台，但是结果却走了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="222221"){
                        
                            layui.use(‘layer‘,function(){
                                  var layer = layui.layer;
                                  
                                  layer.alert(data.returnMsg,{icon:5});
                            });
                            return false;
                        }else if(data.returnCode="222222"){
                            layui.use(‘layer‘,{icon:5});
                          });
                            return false;
                        }else if(data.returnCode="500"){
                            layui.use(‘layer‘,{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按钮。

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!