记一次ajax交互问题

简介: 问题描述:仍然在表单中,像往常一样,异步获取表单内所有输入框的信息,点击提交,确实也走了后台,但是结果却走了ajax的error。这一点使我当时非常疑惑,为什么会走error呢?一般走error的原因如下:(1)不能正确访问URL;(2)请求类型有误;(3)参数有误;(4)传到后台的URL导致某种异常,从而导致ajax走error(5)请求参数类型有误,比如要传json,你却传了xml等,也会导致error;以上是我之前遇到的导致ajax走error的原因。

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

目录
相关文章
|
12天前
|
前端开发 JavaScript Java
使用Ajax进行异步交互:提升Java Web应用的用户体验
【4月更文挑战第3天】Ajax技术在Web开发中提升UX,通过与服务器异步交互实现页面局部更新,无需完整刷新。核心组件包括XMLHttpRequest、JavaScript、HTML/CSS及服务器端脚本。在Java Web应用中,可使用原生JavaScript或框架如jQuery、AngularJS实现Ajax请求。Ajax减少页面刷新,实现实时数据更新,即时表单验证和动态UI,显著改善用户体验,是现代Web开发不可或缺的一部分。
|
12天前
|
前端开发 JavaScript API
Ajax技术的秘密揭秘:异步传输,高效交互
Ajax技术的秘密揭秘:异步传输,高效交互
|
10天前
|
XML 前端开发 JavaScript
使用 AJAX 提升网页数据的动态交互
使用 AJAX 提升网页数据的动态交互
|
12天前
|
XML 前端开发 安全
【专栏:HTML 进阶篇】HTML 表单验证与 AJAX 交互
【4月更文挑战第30天】本文探讨了HTML表单验证和AJAX在现代网页开发中的重要性。HTML表单验证通过必填、数据格式和范围验证确保用户输入的准确性,而AJAX则实现异步通信,提供动态数据加载、局部更新和实时交互。两者的结合优化了表单处理,提高用户体验并减少服务器负担。实际应用包括在线注册、购物车系统和表单反馈。然而,开发者需注意浏览器兼容性、错误处理和安全性问题。掌握这些技术,能打造更智能、高效的网页应用,为用户提供更好的体验。在数字化时代,HTML表单验证和AJAX是网页创新与进步的关键。
|
12天前
|
XML 前端开发 JavaScript
【PHP 开发专栏】PHP 与 Ajax 交互开发
【4月更文挑战第30天】本文探讨了PHP与Ajax交互在Web开发中的应用。Ajax负责客户端的异步请求,PHP处理服务器端业务逻辑。两者结合实现高效、流畅的用户体验。文中阐述了Ajax的工作原理,PHP的角色,数据传输格式选择,并提供了发送Ajax请求、PHP处理请求的示例代码。实际应用包括实时数据更新、表单验证和动态内容加载。开发中需注意跨域、数据安全和性能优化。PHP与Ajax的结合将继续在Web开发中发挥重要作用。
|
6月前
ajax+json模拟一个页面多个统计图数据交互
ajax+json模拟一个页面多个统计图数据交互
30 1
|
11月前
|
XML JSON 前端开发
Qt+QtWebApp开发笔记(五):http服务器html中使用json触发ajax与后台交互实现数据更新传递
前面完成了页面的跳转、登录,很多时候不刷新页面就想刷新局部数据,此时ajax就是此种技术,且是异步的。   本篇实现网页内部使用js调用ajax实现异步交互数据。   在js中使用 ajax是通过XMLHttpRequest来实现的。
|
JSON 前端开发 数据格式
SpringMVC学习笔记(获取参数,传递参数——关于前后端传参交互的总结、from表单、Ajax数据提交))(下)
SpringMVC学习笔记(获取参数,传递参数——关于前后端传参交互的总结、from表单、Ajax数据提交))(下)
|
前端开发 Java API
SpringMVC学习笔记(获取参数,传递参数——关于前后端传参交互的总结、from表单、Ajax数据提交))(上)
SpringMVC学习笔记(获取参数,传递参数——关于前后端传参交互的总结、from表单、Ajax数据提交))(上)
143 0
|
XML 存储 前端开发
JavaWeb中异步交互的关键——Ajax
JavaWeb中异步交互的关键——Ajax
156 0