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

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

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

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

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

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

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

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. [UIScreen mainScreen].bounds.size.width 和self.view.frame.size.width的区别

    self.view.frame.size.width在导航栏titleView计算frame时会出现宽度不准确的情况,布局出现问题,[UIScreen mainScreen].bounds.size. ...

  2. 一起来做chrome扩展《本地存储localStorage》

    chrome中的本地存储其实也是用的HTML5中localStorage,唯一区别是chrome扩展有自己的localStorage,它属于这个扩展,而不属于一个域名.得用这一点可以很好的处理扩展自己 ...

  3. status bar、navigationBar、tableView吸顶view设置

    1. 隐藏navigationBar self.navigationController.navigationBar.hidden = YES; 2. status bar设置 -(void)view ...

  4. C语言 ---- 指针 iOS学习-----细碎知识点总结

    内存的访问形式:1.直接访问:通过变量名进行访问.2.间接访问:先找到变量存放的地址,然后根据地址去访问对应的内存空间. 指针--- // 定义一个整形指针变量,用来存储num1在内存中的地址    ...

  5. android 屏幕分辨率 更改

    手头上有一个320x240的LCD.运行android时,显示内容过大,需要更改屏幕的分辨率. 参考链接 http://www.bkjia.com/Androidjc/899396.html http ...

  6. sys.stdout.write与sys.sterr.write(一)

    目标: 1.使用sys.stdout.write输入0-9数字 2.使用sys.stderr.write输出0-9数字 3.使用两种方式输出0-9,显示0变化到9的过程 1.使用sys.stdout. ...

  7. javascript DOM 操作 attribute 和 property 的区别

    javascript DOM 操作 attribute 和 property 的区别 在做 URLRedirector 扩展时,注意到在使用 jquery 操作 checkbox 是否勾选时,用 at ...

  8. 如何使用Profiler跟踪阻塞信息

    Blocked Process ReportProfiler提供一个被阻塞进程报告的事件Errors and Warnings->Blocked Process Report 指示某个任务已被阻 ...

  9. MWeb 1.7.1 版发布!支持导出为 RTF 和 Docx、发布到 Evernote 带样式、文档库备份和新网站主题等大量改进!

    编辑器及发布服务改进 增加设置图片宽度和居左.居右.居中的语法. 如:![图片说明-w450](pic.jpg) 这样表示设置图片宽度为 450.其中 -w450 为设置语法,生成 HTML 时会自动 ...

  10. Python爬虫学习

    lxml相关 http://blog.csdn.net/kl28978113/article/details/52241678  lxml安装 http://www.lfd.uci.edu/~gohl ...