form表单提交引发的血案
最近，公司某条产品线上的一个功能出了问题：点击查询的时候，该页面在IE上直接卡死，chrome上会卡顿一段时间候提交表单进行查询。拿到这个bug单子以后，简单重现了下，基本上定位到是查询操作中的问题，我假设了两个原因：1、在查询之前发送了什么ajax请求去后台做校验，该请求很慢，卡死；2、在查询之前，有大量的js计算，有性能问题。
那么按照这个思路，我看了下业务线上写的代码，直接找到了查询的toSearch方法，简单过了一遍，就定位到问题了，代码如下（模拟代码）：
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <title>表单提交引发的血案</title> 5 <meta charset="utf-8"> 6 <!--<script type="text/javascript" src="http://libs.baidu.com/jquery/1.7.2/jquery.min.js"></script>--> 7 <script type="text/javascript" src="../core/jquery-1.9.1.js"></script> 8 <script type="text/javascript"> 9 function toSearch(event){ 10 //TODO：这里做了简单的校验 11 $("#myForm").submit(); 12 13 } 14 15 </script> 16 </head> 17 18 <body> 19 <!--所有布局都放在admin-main内部--> 20 <div> 21 <form id="myForm" action="http://www.baidu.com" method="post" onsubmit="return toSearch();"> 22 <input type="text" id="username" name="username"> 23 <input type="submit" value="提交"> 24 </form> 25 </div> 26 27 </body> 28 29 </html>
看了这个代码，我相信大家也和我一样看出问题来了，那就是重复提交，导致死循环。在js中又调用了submit方法去提交。正确的写法是：验证通过后，直接return true，否则return false即可。
为了验证我的想法，然后在本地做了一个例子。例子如上，只不过toSearch方法中，并没有用jq，而是直接用的原生js调用submit方法去提交，可是结果和我想象的并不一样，表单直接提交了。这下子就引起了我极大的兴趣了，为了一探究竟，看下jq的源码，然后又模拟了下，代码如下：
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <title>表单提交引发的血案</title> 5 <meta charset="utf-8"> 6 <!--<script type="text/javascript" src="http://libs.baidu.com/jquery/1.7.2/jquery.min.js"></script>--> 7 <script type="text/javascript" src="../core/jquery-1.9.1.js"></script> 8 <script type="text/javascript"> 9 function toSearch(event){ 10 console.log("表单提交",new Date().getTime()); 11 var oForm = document.getElementById("myForm"); 12 //jquery的submit 13 // $("#myForm").submit(); 14 15 //模拟jquery核心代码 16 var handle = oForm.onsubmit; 17 if ( handle && handle.apply(oForm, [event]) === false ) { 18 event.preventDefault(); 19 } 20 } 21 22 23 </script> 24 </head> 25 26 <body> 27 <!--所有布局都放在admin-main内部--> 28 <div> 29 <form id="myForm" action="http://www.baidu.com" method="post" onsubmit="return toSearch();"> 30 <input type="text" id="username" name="username"> 31 <input type="submit" value="提交"> 32 </form> 33 </div> 34 35 </body> 36 37 </html>
原来jQ中对于submit方法，看了我模拟的jq，我相信大家已经明白了吧，jQ是拿着方法，用apply去执行，原生submit是直接提交了form表单。
问题虽小，也很简单，但是更加坚定了我的信念：基础是王道，还是要一步一个脚印，才能走的更远。
