form表单提交引发的血案
最近，公司某条产品线上的一个功能出了问题：点击查询的时候，该页面在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表单提交引发的血案的更多相关文章
- Form表单提交数据的几种方式
一.submit提交 在form标签中添加Action(提交的地址)和method(post),且有一个submit按钮(<input type='submit'>)就可以进行数据的提交, ...
- jQuery Form 表单提交插件-----formSerialize，fieldSerialize，fieldValue，resetForm，clearForm，clearFields的 应用
一.jQuery Form的其他api 1. formSerialize 将表单序列化成查询串.这个方法将返回一个形如: name1=value1&name2=value2的字符串.是否可 ...
- jQuery Form 表单提交插件----Form 简介，官方文档，官方下载地址
一.jQuery Form简介 jQuery Form插件是一个优秀的Ajax表单插件,可以非常容易地.无侵入地升级HTML表单以支持Ajax.jQuery Form有两个核心方法 -- ajaxF ...
- Checkbox框全选操作，form表单提交与jquery ajax提交两种处理方式
//1.jquery ajax<script type="text/javascript"> $(function(){ var basePath = $(" ...
- form表单提交
1.form表单提交.html页面失败 <%--客户端form--%> <form id="form2" action="LoginOne.html&q ...
- ajax form表单提交 input file中的文件
ajax form表单提交 input file中的文件 现今的主流浏览器由于ajax提交form表单无法把文件类型数据提交到后台,供后台处理,可是开发中由于某些原因又不得不用ajax提交文件, 为了 ...
- 2017-01-11小程序form表单提交
小程序form表单提交 1.小程序相对于之前的WEB+PHP建站来说,个人理解为只是将web放到了微信端,用小程序固定的格式前前端进行布局.事件触发和数据的输送和读取,服务器端可以用任何后端语言写,但 ...
- SpringMVC中使用bean来接收form表单提交的参数时的注意点
这是前辈们对于SpringMVC接收表单数据记录下来的总结经验: SpringMVC接收页面表单参数 springmvc请求参数获取的几种方法 下面是我自己在使用时发现的,前辈们没有记录的细节和注意点 ...
- Form表单提交，Ajax请求，$http请求的区别
做过前端同学想必都避免不了要和后台server打交道.而以下这三种与后台交互的方式想必大家都不陌生. Form表单提交,Ajax请求,Angular的$http请求 以前一直搞不清楚什么时候应该用哪种 ...
随机推荐
- ASP.NET没有魔法——Identity与Owin
上篇文章介绍了如何在ASP.NET MVC项目中引入Identity组件来实现用户注册.登录及身份验证功能,并且也提到了Identity是集成到Owin中的,本章就来介绍一下什么是Owin以及如何使用 ...
- 《Web前端开发修炼之道》-读书笔记CSS部分
如何组织CSS-分层 应用 css 的能力分两部分:一部分是css的API,重点是如何用css控制页面内元素的样式:另一部分是css框架,重点是如何对 css 进行组织.如何组织 css 可以有多种角 ...
- RSA加密算法验证（C#实现）
RSA算法简单原理介绍(节选于网络) 假设Alice想要通过一个不可靠的媒体接收Bob的一条私人讯息.她可以用以下的方式来产生一个公钥和一个私钥: 随意选择两个大的质数p和q,p不等于q,计算N=pq ...
- django开发中利用 缓存文件 进行页面缓存
首先我们先来了解下浏览器的缓存 浏览器缓存机制 Cache-control策略 Cache-Control与Expires的作用一致,都是指明当前资源的有效期,控制浏览器是否直接从浏览器缓存取数据还是 ...
- CentOs6.8 hadoop集群搭建过程中的问题
1.Error: Java heap space 网上有很多说是java虚拟机内存不够的,我也试着修改内存大小,但是没起作用,后来发现是文件在传输过程中失真.文件在上传到HDFS后变成乱码,重新上传文 ...
- 使用js编写一个简单的运动框架
下班后,,没事捣鼓捣鼓个人的小爱好. 首先,说明我的这个运动框架(css所有属性)也是常见的框架一种,健壮性并不是太好,对于新手学习倒是挺好,,若是大神,老司机请拐弯. 上来,我们先定义一个区块,然后 ...
- 在jsp提交表单的参数封装到一个方法里
建议去看一下孤傲苍狼写的Servlet+JSP+JavaBean开发模式(http://www.cnblogs.com/xdp-gacl/p/3902537.html), 最好把他JavaWeb学习总 ...
- 学习C++ -> 构造函数与析构函数
学习C++ -> 构造函数与析构函数 一.构造函数的介绍 1. 构造函数的作用 构造函数主要用来在创建对象时完成对对象属性的一些初始化等操作, 当创建对象时, 对象会自动调用 ...
- Could not load type 'System.ServiceModel.Activation.HttpModule' from assembly 'System.ServiceModel, Version=3.0.0.0,"解决办法
这是因为先安装了 .NET Framework 4,随后启用了 .NET Framework 3.5 WCF HTTP 激活,则会发生此错误. 只需要已管理员用户在cmd中运行aspnet_regii ...
- 03.javabean
一.javabean简介 1, 作用:一个可重用组件,在jsp开发中可减少重复代码,使HTML与JAVA代码分离便于日后维护. 2, javabean类要求: 所有类必须放在包中,且为public ...