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

    1.用户修改密码: 方法一:mysqladmin -u用户 -p密码 password '新密码' mysqladmin -uroot -pdefault password 'zhouli.cn' 方 ...

  2. 胜利大逃亡(续)（bfs+状态压缩）

    胜利大逃亡(续) Time Limit: 4000/2000 MS (Java/Others) Memory Limit: 65536/32768 K (Java/Others) Total Subm ...

  3. A Simple Game

    A Simple Game Time Limit: 1000/1000 MS (Java/Others) Memory Limit: 32768/65535 K (Java/Others) Total ...

  4. 阿里云ecs遭到频繁的ddos攻击始末

    苦逼熬夜近俩月的时间搞出来个小东东,还指望它能给自己捞点~  结果刚上线没多久就遭到竞争对手疯狂的ddos攻击. 可怜的阿里云默认只能抗住5G的攻击,超出的直接黑洞,也是很无奈,然而能免费抗5G这在国 ...

  5. Python一个命令开启http下载服务器（可以局域网内共享文件）

    前提条件:windows系统上安装python 如果想把D:\asdm作为提供下载的目录, 打开cmd然后cd命令进入该目录:cd D:\asdm, 然后执行Python -m SimpleHTTPS ...

  6. word,excel,ppt转Pdf,Pdf转Swf,通过flexpaper+swftools实现在线预览

    其实这是我好几年前的项目,现在再用这种方式我也不建议了,毕竟未来flash慢慢会淘汰,此方式也是因为目测大部分人都装了flash,才这么做的,但是页面展示效果也不好.其实还是考虑收费的控件,毕竟收费的 ...

  7. vue打包之后生成一个配置文件修改接口

    前言: 我们的vue代码打包上传到服务器之后, 要是数据接口 以后换了域名什么的,是不是需要重新去vue文件里修改接口. 能不能生成一个配置文件,里面可以配置域名或其它什么字段之类的,这样以后换了域名 ...

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

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

  9. MySQL plugin结构

    1.背景 MySQL插件安装语法如下: 13.7.3.3 INSTALL PLUGIN Syntax INSTALL PLUGIN plugin_name SONAME 'shared_library ...

  10. Linux 计划任务总结

    今天项目用到了,Linux计划任务,从网上找了基本blog看了,总结了下. Linux 下的计划任务有atd和crond两种计划任务.atd服务使用的at命令只能执行一次,而crond服务使用的cro ...