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> 

 

posted @ 2019-02-21 13:13  imustsun  阅读(1327)  评论(0编辑  收藏  举报