zoukankan      html  css  js  c++  java
  • ajax表单提交较慢原因的解决办法

    ajax提交表单时,发现过了好长时间才有反应。使用F12打开开发人员工具一看,发现提示“provisional headers are shown”。

    百度了一下,才知道可能是ajax异步提交和form表单默认提交的关系没处理好,容易导致进程锁死,进而导致反应时间比较长。

    于是,借鉴了别人介绍的解决办法“在函数中加上“event.preventDefault()”阻止默认事件和异步提交事件相冲突,问题顺利解决。

    (有的说 用return false,便可阻止默认事件,但是通过这个来看,有些阻止的不彻底,还是要加上event.preventDefault()

    <script src="/app/sss/view/common/js/jquery.js""></script>
    
    
    
     <div id="common_box">
                       <div id="cli_on"><img src="{:RES}/img/jt.png" alt=""></div>
    
                       <div class="gu_w" >
                  
    <form id="suggestForm" class="submit" method="post" action="{:url('About/feedbacks')}" name="foot_form" onSubmit="return foot_Checkfeedback();">
                              
                        <div class="">
                            <div class="gu_b">
                                <i>Inquiry title*</i>
                                &nbsp<input type="text" class="" id="intrs" name="intrs"placeholder="Must fill" />
                            </div> 
                            <div class="gu_b">
                                <i>Content*</i>
                                &nbsp<textarea name="workintrs" id="workintrs" cols="30" rows="10" class=""placeholder="Must fill" ></textarea>
                            </div>
                            <div class="gu_b ">
                                <i>Company name</i>
                                &nbsp&nbsp<input type="text" class="" id="name" name="name" />
                            </div> 
                            <div class="gu_b">
                                <i>Tel</i>  
                                &nbsp&nbsp<input type="text" class="" id="mobile" name="mobile"  />
                            </div>
                            <div class="gu_b">
                                <i>E-mail*</i> 
                               <!--  邮&emsp;&emsp;箱: -->
                                &nbsp<input type="text" class="" id="emls" name="emls" placeholder="Must fill" />
                            </div>
                            <div class="gu_c">
                             
                               <button  class=" layui-btn layui-btn-warm btn btn-warning">Submit</button>
                            </div>
                        </div>
                        </form>   
                       </div>
                      </div>
      <!-- 固定窗口 -->
    <script type="text/javascript">
    window.onload = function() {
     var combox = document.getElementById("common_box");
     var cli_on = document.getElementById("cli_on");
     var flag = true, timer = null, initime = null, r_len = 0;
     cli_on.onclick = function () {
      /*如果不需要动态效果,这两句足矣
      combox.style.right = flag?'-270px':0;
      flag = !flag;
      */
      clearTimeout(initime);
      //根据状态flag执开展开收缩
      if (flag) {
       r_len = 0;
       timer = setInterval(slideright, 10);
      } else {
       r_len = -270;
       timer = setInterval(slideleft, 10);
      }
     }
     //展开
     function slideright() {
      if (r_len <= -270) {
       clearInterval(timer);
       flag = !flag;
       return false;
      } else {
       r_len -= 5;
       combox.style.right = r_len + 'px';
      }
     }
     //收缩
     function slideleft() {
      if (r_len >= 0) {
       clearInterval(timer);
       flag = !flag;
       return false;
      } else {
       r_len += 5;
       combox.style.right = r_len + 'px';
      }
     }
     //加载后3秒页面自动收缩
     initime = setTimeout("cli_on.click()", 100);
    }
    </script>
    <!-- 固定窗口结束 -->   
      <!-- 表单正则 -->
      <script language='javascript'>function foot_Checkfeedback(){ 
     
      if (document.foot_form.intrs.value.trim().length == 0) {
        swal('Inquiry title cannot be empty');
        document.foot_form.intrs.focus();
        return false;}
        var email = document.foot_form.emls.value;
        var pattern = /^[a-z0-9A-Z]+[- | a-z0-9A-Z . _]+@([a-z0-9A-Z]+(-[a-z0-9A-Z]+)?.)+[a-z]{2,}$/;
        chkFlag = pattern.test(email); if(!chkFlag){
        swal('Email is error! !');
           document.foot_form.emls.focus(); return false;}
        if (document.foot_form.workintrs.value.trim().length == 0) {
        swal('Content cannot be empty');
        document.foot_form.workintrs.focus();
        return false;}
    
        $.ajax({
        type: "POST",//方法
        url: "{:url('About/feedbacks')}" ,//表单接收url
        data: $('#suggestForm').serialize(),
        success: function () {
         //提交成功的提示词或者其他反馈代码
         //var result=document.getElementById("success");
         //result.innerHTML="成功!";
         document.getElementById("intrs").value="";
         document.getElementById("workintrs").value="";
         document.getElementById("name").value="";
         document.getElementById("mobile").value="";
         document.getElementById("emls").value="";
         swal('success!');
    
        },
        error : function() {
         //提交失败的提示词或者其他反馈代码
         //var result=document.getElementById("success");
         //result.innerHTML="失败!";
         swal('failure!')
        }
       });
    
         event.preventDefault();//防止起冲突,要阻止默认的行为
         return false;
        };
    </script> 
  • 相关阅读:
    Springboot+mybatis-plus+mysql+clickhouse集成多数据源
    对集合里每个元素是一个对象,按照对象某一个属性值给这个集合排序
    vue的a-tree-select选择父节点回显的是子节点
    Es简单条件查询
    使用Ant Desigen在vue里面实现分页以及表头的模糊查询
    搭建第一个vue项目
    Address localhost:1099 is already in use
    spring的控制反转DI---基于注解实现
    mybatis下的ResultMap配置一对一以及一对多
    mybatis入门
  • 原文地址:https://www.cnblogs.com/imustun/p/10411509.html
Copyright © 2011-2022 走看看