最近，公司某条产品线上的一个功能出了问题：点击查询的时候，该页面在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. PHP获取文件扩展名的五种方式

    这是我应聘实习时遇到的一道笔试题: 使用五种以上方式获取一个文件的扩展名. 要求:dir/upload.image.jpg,找出 .jpg 或者 jpg , 必须使用PHP自带的处理函数进行处理,方法 ...

  2. LeetCode 170. Two Sum III - Data structure design （两数之和之三 - 数据结构设计）$

    Design and implement a TwoSum class. It should support the following operations: add and find. add - ...

  3. Jquery datatable中文排序问题

    先扩展datatable的的排序功能,添加一个自定义排序函数 //为jq datatable 自定义中文排序 jQuery.fn.dataTableExt.oSort['chinese-sort-as ...

  4. C++中引用的底层实现

    为了研究一下C++中引用的底层实现,写了一个小代码验证其中的基本原理. 引用是一个变量的别名,到底会不会为引用申请内存空间?如果申请空间,空间存放的是什么,下面的代码就主要解决这个疑问. 代码如下,详 ...

  5. Python_Python遍历列表的四种方法

    方式一: app_list = [1234, 5677, 8899] <!-- lang: python --> for app_id in app_list: <!-- lang: ...

  6. spring cloud+dotnet core搭建微服务架构：Api授权认证（六）

    前言 这篇文章拖太久了,因为最近实在太忙了,加上这篇文章也非常长,所以花了不少时间,给大家说句抱歉.好,进入正题.目前的项目基本都是前后端分离了,前端分Web,Ios,Android...,后端也基本 ...

  7. Vue js 的生命周期详解

    Vue 实例的生命周期 Vue 实例有一个完整的生命周期,也就是从开始创建.初始化数据.编译模板.挂载Dom→渲染.更新→渲染.卸载等一系列 过程,我们称这是 Vue 的生命周期.通俗说就是 Vue ...

  8. J1001.Java原生桌面及Web开发浅谈

    自从Java问世以来,在服务端开发方面取得了巨大的发展.但是在桌面/Web开发方面,一直没有得到大的发展.从最初的AWT,到Swing,再到JavaFX,Java从来没有在桌面/Web解决方案中取得重 ...

  9. HDU3045 Picnic Cows （斜率DP优化）（数形结合）

    转自PomeCat: "DP的斜率优化--对不必要的状态量进行抛弃,对不优的状态量进行搁置,使得在常数时间内找到最优解成为可能.斜率优化依靠的是数形结合的思想,通过将每个阶段和状态的答案反映 ...

  10. 关于java数据库章节connection连接不成功的时候！！！

    无图,因为忘了截图.但是网上很多说法: 异常那个地方最先是说连接失败的,原因很简单,没有安装Mysql数据库!!!安装了之后出示没有密码,所以程序里面的地方也不要有密码. 然后运行就成功了.相关的安装 ...