防止表单重复提交的方法总体来说有两种,一种是在js中阻止重复提交;另一种是在后台利用token令牌实现,大致思路是生成一个随机码放到session和form表单的隐藏输入框中,提交表单时两者对比,表单处理完毕清空或者修改session中的token。

在js中处理简单易懂,同时能解决我现在所做的项目中的问题,目前暂用js处理,后期如有需要再研究token机制。代码如下:

1、表单提交后禁用提交按钮(在本项目中表单提交完成后,如果处理成功都把form表单关掉了)

 /**
* form表单格式验证通过之后、表单提交前将提交按钮禁用(注意顺序)
* @param submitBtnId 提交按钮ID
* @param btnType 按钮类型 'button'或者'linkbutton'
* @returns {Boolean}
*/
function disableSubmitBtn(submitBtnId, btnType){
if(btnType == 'button'){
$("#"+submitBtnId).attr("disabled","disabled");
}else if(btnType == 'linkbutton'){
$("#"+submitBtnId).linkbutton('disable');
}
return true;
}

由于在项目中有用到普通button和easyUI的linkbutton两种按钮,而禁用这两种按钮的方法不同,所以需要多传一个参数btnType(按钮类型)

2、如果提交表单失败则启用按钮,以便用户修改内容后再次提交

 /**
* form表单提交失败后将提交按钮开启,以便用户修改数据后再次提交
* @param submitBtnId 提交按钮ID
* @param btnType 按钮类型 'button'或者'linkbutton'
* @returns {Boolean}
*/
function enableSubmitBtn(submitBtnId, btnType){
if(btnType == 'button'){
$("#"+submitBtnId).removeAttr("disabled");
}else if(btnType == 'linkbutton'){
$("#"+submitBtnId).linkbutton('enable');
}
return true;
}

3、在每次表单提交时调用这两个方法,具体放的位置根据实际业务逻辑而定

js阻止form表单重复提交的更多相关文章

  1. JavaWeb学习总结(十一):Session解决form表单重复提交

    在平时开发中,如果网速比较慢的情况下,用户提交表单后,发现服务器半天都没有响应,那么用户可能会以为是自己没有提交表单,就会再点击提交按钮重复提交表单,我们在开发中必须防止表单重复提交. 一.表单重复提 ...

  2. php 解决和避免form表单重复提交的方法

    在提交表单的时候,可能遇到网速等导致页面突然加载变慢,用户重复地点击提交按钮,将在数据库产生多条数据,导致不可控情况. 比如下面的情况就会导致表单重复提交: 点击提交按钮两次. 点击刷新按钮. 使用浏 ...

  3. form表单重复提交,type=“button”和type=“submit”区别

    公司测试提了一个项目后台在IE浏览器下(360,firefox就没问题)出现数据重复的问题,调试了好久终于发现问题所在,也不知道是谁写的代码,醉醉的.... 错误地点: <input type= ...

  4. easyUI的form表单重复提交处理

    1. 问题 生产环境出现过新增用户提交, 入库两条重复数据的情况; 但是我查看代码, 页面做了校验, 后台插入数据也做了校验;  出现这种几率的事件的非常小的, 但是还是会碰到, 客户会对我们的产品产 ...

  5. js 模拟form表单post提交

    var generateHideElement = function (name, value) { var tempInput = document.createElement("inpu ...

  6. 防止表单提交时刷新页面-阻止form表单的默认提交行为

    最近在写 ajax 提交的时候遇到一个问题,在执行 ajax 提交之后,浏览器页面自动刷新了,主要是没有 由于form 表单的默认提交行为.一下是几种阻止 form 表单默认提交行为的方式. 1.使用 ...

  7. 基于form表单submit提交不跳转

    方法一:target <html> <body> <form action="" method="post" target=&qu ...

  8. java web学习总结(十三) -------------------使用Session防止表单重复提交

    在平时开发中,如果网速比较慢的情况下,用户提交表单后,发现服务器半天都没有响应,那么用户可能会以为是自己没有提交表单,就会再点击提交按钮重复提交表单,我们在开发中必须防止表单重复提交. 一.表单重复提 ...

  9. JavaWeb防止表单重复提交(转载)

    转载自:http://blog.csdn.net/ye1992/article/details/42873219 在平时开发中,如果网速比较慢的情况下,用户提交表单后,发现服务器半天都没有响应,那么用 ...

随机推荐

  1. Bootstrap响应式栅格系统的设计原理

    1.历史背景 Bootstrap是Twitter的工程师Mark Otto和Jacob Thornton开发的一套供内部使用的UI框架,于2011年开源.2012年发布的第二版中新增了12列栅格系统和 ...

  2. PCB上过孔via钻孔的直径如何设置 是任意的吗 谈谈PCB钻孔工艺及规格

    PCB上过孔via钻孔的直径如何设置,是不是可以随便填入一个直径尺寸就行了?比如我的走线宽度是6mil,那我的via过孔直径也设置为6mil,节约布线空间岂不是更好?这样的设计板厂是否都能按照设计规格 ...

  3. C# WebService输出JSON 实现二

    一般js请求web服务uk可以通过 contentType: "application/json"  获取json效果,为了取得更好的效果,可以在服务端强制返回JSON格式 服务端 ...

  4. OC中协议, 类目, 时间, 延展, 属性

    只有继承和协议需要引IMPORT "头文件"; 必须接受marryprotocol协议, id<marryprotocol>基于类型的限定, 才能给实例变量赋值 @pr ...

  5. CentOS下使用Postfix + Dovecot + Dnsmasq搭建极简局域网邮件系统

    背景 开发环境为局域网,工作内容需要经常查看邮件文件(*.eml),可恶的Foxmail必须验证账户才能进入主界面,才能打开eml文件查看. 无奈搭一个局域网内的邮件系统吧.极简搭建,仅用于通过Fox ...

  6. Eclipse 的单步调试(转)

    1.设置断点在程序里面放置一个断点,也就是双击需要放置断点的程序左边的栏目上.2.调试(1)点击"打开透视图"按钮,选择调试透视图,则打开调试透视图界面,然后先设置断点,按调试按钮 ...

  7. Python之路-(Django进阶二)

    model: 双下划线: # 获取个数 # # models.Tb1.objects.filter(name='seven').count() # 大于,小于 # # models.Tb1.objec ...

  8. JVM 内部运行线程介绍

    转(http://club.alibabatech.org/article_detail.htm?articleId=4) JVM 内部运行线程介绍 作者:蒋家佳/觉梦(支付宝开发工程师) 浏览量: ...

  9. pip安装

    首先安装 python 和python-devel 然后 https://pypi.python.org/pypi/pip/ 下载 tar.gz 解压,安装 tar zxvf pip-8.1.1.ta ...

  10. 点餐系统Sprint2总结

    Sprint1结束后休息了两天,就开始准备Sprint2.一开始就知道数据库的连接对我们来说都是大难题. 虽然使用sqlite3,与android连接起来比较容易,但还是不容忽视.为期10天,和Spr ...