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

问题虽小，也很简单，但是更加坚定了我的信念：基础是王道，还是要一步一个脚印，才能走的更远。

form表单提交引发的血案的更多相关文章

  1. Form表单提交数据的几种方式

    一.submit提交 在form标签中添加Action(提交的地址)和method(post),且有一个submit按钮(<input type='submit'>)就可以进行数据的提交, ...

  2. jQuery Form 表单提交插件-----formSerialize，fieldSerialize，fieldValue，resetForm，clearForm，clearFields的 应用

    一.jQuery Form的其他api  1.  formSerialize 将表单序列化成查询串.这个方法将返回一个形如: name1=value1&name2=value2的字符串.是否可 ...

  3. jQuery Form 表单提交插件----Form 简介，官方文档，官方下载地址

     一.jQuery Form简介 jQuery Form插件是一个优秀的Ajax表单插件,可以非常容易地.无侵入地升级HTML表单以支持Ajax.jQuery Form有两个核心方法 -- ajaxF ...

  4. Checkbox框全选操作，form表单提交与jquery ajax提交两种处理方式

    //1.jquery ajax<script type="text/javascript"> $(function(){ var basePath = $(" ...

  5. form表单提交

    1.form表单提交.html页面失败 <%--客户端form--%> <form id="form2" action="LoginOne.html&q ...

  6. ajax form表单提交 input file中的文件

    ajax form表单提交 input file中的文件 现今的主流浏览器由于ajax提交form表单无法把文件类型数据提交到后台,供后台处理,可是开发中由于某些原因又不得不用ajax提交文件, 为了 ...

  7. 2017-01-11小程序form表单提交

    小程序form表单提交 1.小程序相对于之前的WEB+PHP建站来说,个人理解为只是将web放到了微信端,用小程序固定的格式前前端进行布局.事件触发和数据的输送和读取,服务器端可以用任何后端语言写,但 ...

  8. SpringMVC中使用bean来接收form表单提交的参数时的注意点

    这是前辈们对于SpringMVC接收表单数据记录下来的总结经验: SpringMVC接收页面表单参数 springmvc请求参数获取的几种方法 下面是我自己在使用时发现的,前辈们没有记录的细节和注意点 ...

  9. Form表单提交，Ajax请求，$http请求的区别

    做过前端同学想必都避免不了要和后台server打交道.而以下这三种与后台交互的方式想必大家都不陌生. Form表单提交,Ajax请求,Angular的$http请求 以前一直搞不清楚什么时候应该用哪种 ...

随机推荐

  1. LeetCode 152. Maximum Product Subarray （最大乘积子数组）

    Find the contiguous subarray within an array (containing at least one number) which has the largest ...

  2. 学习Identity Server 4的预备知识

    我要使用asp.net core 2.0 web api 搭建一个基础框架并立即应用于一个实际的项目中去. 这里需要使用identity server 4 做单点登陆. 下面就简单学习一下相关的预备知 ...

  3. .7-Vue源码之AST（3）

    上一节到了parseHTML函数,该函数接受一个字符串与一个对象,字符串即对应的DOM,对象包含几个字符串匹配集及3个长函数. 简略梳理部分函数代码如下: // Line-7672 function ...

  4. Another Eight Puzzle

    Problem Description Fill the following 8 circles with digits 1~8,with each number exactly once . Con ...

  5. Treats for the Cows

     Treats for the Cows Time Limit:1000MS     Memory Limit:65536KB     64bit IO Format:%I64d & %I64 ...

  6. hbase的HQuorumPeer和QuorumPeerMain

    hbase是列式数据库,既可以单机也可以以集群的方式搭建,以集群的方式搭建一般建立在hdfs之上. 分布式的hbase如何启动? 首先启动hadoop,然后就来问题了:zookeeper和hbase的 ...

  7. Visual formatting model 可视化格式模型

    在可视化格式模型里,每个元素都是由一个或者多个盒子组成,这些盒子的布局由下面规则控制: box dimensions and type.(块元素和行内元素) positioning scheme (n ...

  8. 用代理IP进行简单的爬虫——爬高匿代理网站

    用西刺代理网站的IP爬高匿代理网站 import re import _thread from time import sleep,ctime from urllib.request import u ...

  9. sublime 集成git插件，及git常用命令

    以前用了很久的totoiseSVN,显然不够高大上,开发界的版本装x利器还得是git.然而git的命令行对没怎么用过linux的人可能觉得还不如用gitGUI,可是当你知道sublime可以集成git ...

  10. FLP不可能性（FLP impossibility）

    FLP不可能性(FLP impossibility) FLP impossibility是一个定理,它证明了在分布式情景下,无论任何算法,即使是只有一个进程挂掉,对于其他非失败进程,都存在着无法达成一 ...