最近,公司某条产品线上的一个功能出了问题:点击查询的时候,该页面在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. 解析 .Net Core 注入 (3) 创建对象

    回顾 通过前两节的学习,我们知道 IServiceCollection 以元数据(ServiceDescriptor)的形式存放着用户注册的服务,它的 IServiceCollection 的拓展方法 ...

  2. MySql中利用insert into select 准备数据uuid主键冲突

    MYSQL 中表1需要准备大量数据,内容主要取自表2,id必须为32位uuid (项目所有表都是这样,没办法), 准备这样插入: INSERT INTO TBL_ONE (ID, SOID, SNAM ...

  3. d3根据数据绘制不同的形状

    绘制力导向图的时候通常节点都是圆形,但也会遇到公司节点绘制成圆型,人绘制成方形的情况,那我们怎么依据数据绘制不同的形状. 你可能首先会想到,这很简单啊,是公司的时候append circle,是人的时 ...

  4. Rank of Tetris

    Rank of Tetris Time Limit: 1000/1000 MS (Java/Others) Memory Limit: 32768/32768 K (Java/Others) Tota ...

  5. undefined 与null的区别与差异

    typeof null  ---> object 运行结果:

  6. HTML5轻松实现拍照上传功能[转载]

    转载 http://www.18sucai.com/article/275.htm 传统方法如果想实现拍照功能,需要后台应用程序复杂的编写,但随着html5的发展,在HTML5规范的支持下,Web A ...

  7. number 类型转换 符号

    function convert(sValue, sDataType) {   switch(sDataType) {      case “int”:          return parseIn ...

  8. Windows系统安装MySQL

    在Windows中安装mysql不够幸运的话,会遇到相当多的坑,当然这也算是一种财富吧,让自己碰到问题去查找解决方案.有时候不是一时半会就可以解决的.有同学说过安装mysql安装两天还没有装上.不用担 ...

  9. 【机器学习实战】第13章 利用 PCA 来简化数据

    第13章 利用 PCA 来简化数据 降维技术 场景 我们正通过电视观看体育比赛,在电视的显示器上有一个球. 显示器大概包含了100万像素点,而球则可能是由较少的像素点组成,例如说一千个像素点. 人们实 ...

  10. 3.Apache ZooKeeper数据模型

    1. ZooKeeper自下向上的服务视图 Apache ZooKeeper是分布式应用程序的协调服务. 它旨在解决分布式应用程序中与组件协调相关的棘手问题. 它通过暴露一个简单而强大的接口来实现这一 ...