防止表单重复提交的方法总体来说有两种,一种是在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. juqery 拖拽元素

    转自  http://www.cnblogs.com/holbrook/archive/2012/03/13/2394111.html 因为怕博主删除博客,所以复制过来! JQuery UI是JQue ...

  2. Source Insight 3.X 标签插件v1.0发布

    Source Insight可以说是一款程序员必备的开发/阅读源码工具,美中不足的是SI没有标签栏,多个源码之间切换很不方便,于是我就乘闲暇之余写了该作品sihook:标签插件;不过严格意义上来说si ...

  3. python垃圾回收机制的一些理解

    概览:       主要通过 引用计数来进行垃圾收集, 就是说,当一个对象没有被其他对象引用的时候,会释放掉内存.     但是会有一些循环引用的对象,通过上面的方法,是没有办法清除掉的.所以,pyt ...

  4. jquery easyui tree的全选与反选

    //全选反选 //参数:selected:传入this,表示当前点击的组件 //treeMenu:要操作的tree的id:如:id="userTree" function tree ...

  5. http的一些事

    查找资料将http中缓存相关的知识记录下 一般来说:Last-Modifed和Expires是一对,ETag和Cache-Control是一对 Last-Modified Client端跟Server ...

  6. SpringMVC常用配置-文件上传-基于Servlet 3.0

    [2] http://www.cnblogs.com/weilu2/p/springmvc_MultipartConfigElement_tomcat_webapps_work.html

  7. 构造函数this和base的区别

    构造函数this和base的区别: this:调用的是本身,不能调用父类和子类的 base:调用父类的,不能调用本身的,但别人继承,可以调用 从中也可以得出另外个结果构造函数的运行过程 先从基类开始构 ...

  8. error in config file "/etc/rabbitmq/rabbitmq.config"

    记录一次RabbitMQ配置文件配置错误 error信息: dill@ubuntu-vm:/usr/share/doc/rabbitmq-server$ sudo /usr/lib/rabbitmq/ ...

  9. a biped was detected but cannot be configured properly (Bipe导入Unity 无法正确识别)

    OP stated "I export the biped with 'animation' and 'bake animation' ticked and the correct fram ...

  10. C++之路进阶——poj3461(Oulipo)

    Oulipo Time Limit: 1000MS   Memory Limit: 65536K Total Submissions: 35694   Accepted: 14424 Descript ...