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>  <input type="text" class="" id="intrs" name="intrs"placeholder="Must fill" /> </div> <div class="gu_b"> <i>Content*</i>  <textarea name="workintrs" id="workintrs" cols="30" rows="10" class=""placeholder="Must fill" ></textarea> </div> <div class="gu_b "> <i>Company name</i>   <input type="text" class="" id="name" name="name" /> </div> <div class="gu_b"> <i>Tel</i>   <input type="text" class="" id="mobile" name="mobile" /> </div> <div class="gu_b"> <i>E-mail*</i> <!-- 邮  箱: -->  <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>