form表单提交引发的血案

tengri 2017-12-11 原文

最近，公司某条产品线上的一个功能出了问题：点击查询的时候，该页面在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>