最近，公司某条产品线上的一个功能出了问题：点击查询的时候，该页面在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. V6厂最新V4版本卡地亚蓝气球大号42mm男表|价格报价|

    大家好!为大家带来一款贵族气质的V6厂卡地亚蓝气球大号42mm男表!众所周知卡地亚品牌给人的印象是非常尊贵.奢华的,而且卡地亚蓝气球系列的表款都有着极高的识别度,而且每一款都是极受欢迎的热门腕表,接下 ...

  2. 话说LightningChart是最快最美的图表控件，到底先进在哪里？

    LightningChart Ultimate v.8.2 最新版本新特征告诉你它先进在哪里! 1. Headless 模式 headless模式允许在没有GUI的情况下使用LC.例如,在Window ...

  3. 笔记-64位dump转32位dump

    下图是从测试拷64位windbg抓的dump文件拖到32位windbg查看线程堆栈信息的效果. 那么我们加载一下wow64exts模块,因为需要这个模块帮助把64位的dump,转换成32位的dump. ...

  4. Python CRM项目一

    开发环境: 语言Python3.X以上 MTV WEB框架 Django 前端框架 jQuery+bootstrap 数据库 MySQL 运行环境 安装Python3.x 安装Django 除IE8以 ...

  5. CREATE DATABASE RoomReservation

    要从我的模型开始构建我的RoomReservation数据库对象,我将创建表对象. 要在SQL Server中创建表,我需要使用CREATE TABLE语句. 使用CREATE TABLE语句,我将能 ...

  6. 0_Simple__asyncAPI

    关于CPU - GPU交互的简单接口函数. ▶ 源代码: // includes, system #include <stdio.h> // includes CUDA Runtime # ...

  7. 浅谈字体小图标font awesome，iconfont，svg各自优缺点

    三种都是矢量图(即放大不失真),但是个自又有个自的优缺点, 1.font awesome: 优点:相对比较简单,查看官网看例子基本上都会用 (http://www.bootcss.com/p/font ...

  8. 【深度学习笔记】（二）基于MNIST数据集的神经网络实验

    一.介绍 MNIST(Mixed National Institute of Standards and Technology database)是网上著名的公开数据库之一,是一个入门级的计算机视觉数 ...

  9. linux操作系统基础篇（四）

    一.系统监控 1.TOP 命令 1) top命令的功能:top命令是Linux下常用的性能分析工具,能够实时显示系统中各个进程的资源占用状况,类似于Windows的任务管理器. 2) 使用top命令列 ...

  10. python操作Mysql基础

    import pymysql #不修改数据 def no_data_change(): db=pymysql.connect('host','user','pw','db_name') #host,u ...