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