最近，公司某条产品线上的一个功能出了问题：点击查询的时候，该页面在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 259. 3Sum Smaller （三数之和较小值） $

    Given an array of n integers nums and a target, find the number of index triplets i, j, k with 0 < ...

  2. 26.Linux-网卡驱动(详解)

    1.描述 网卡的驱动其实很简单,它还是与硬件相关,主要是负责收发网络的数据包,它将上层协议传递下来的数据包以特定的媒介访问控制方式进行发送, 并将接收到的数据包传递给上层协议. 网卡设备与字符设备和块 ...

  3. lintcode 132 模式

    题目要求 给你一个 n 个整数的序列 a1,a2,...,an,一个 132 模式是对于一个子串 ai,aj,ak,满足 i < j < k 和 ai < ak < aj.设计 ...

  4. Can you answer these queries?

    Can you answer these queries? Time Limit:2000MS     Memory Limit:65768KB     64bit IO Format:%I64d & ...

  5. T9

    T9 Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 65536/32768 K (Java/Others) Total Submission ...

  6. javaCountDownLatch闭锁

    package com.java.concurrent; import java.util.concurrent.CountDownLatch; /** * CountDownLatch: 闭锁,在完 ...

  7. HTML学习笔记 CSS背景样式案例 第六节 （原创） 参考使用表

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  8. Netty（二）——TCP粘包/拆包

    转载请注明出处:http://www.cnblogs.com/Joanna-Yan/p/7814644.html 前面讲到:Netty(一)--Netty入门程序 主要内容: TCP粘包/拆包的基础知 ...

  9. SUID,SGID,SBIT这些到底是什么

    SUID,SGID,SBIT这些都是文件的特殊权限. SUID(Set UID)文件执行过程中,用户拥有文件的root权限. SGID(Set GID)文件执行过程中,执行者拥有该文件的用户组的权限. ...

  10. CSS3属性——“box-flex”

    CSS3的新增属性有很多,其中有一个比较神奇的,通常称为盒子模型布局,不需要把div浮动,也能合理分配.看如下例子: HTML: <div id="box"> < ...