防止用户将表单重复提交的方法汇总

   2015-08-09 0
核心提示:这篇文章主要介绍了4种防止用户将表单重复提交的方法,都是平时项目中经常用到的方法,小伙伴们根据自己的需求,自由选择吧

表单重复提交是在多用户Web应用中最常见、带来很多麻烦的一个问题。有很多的应用场景都会遇到重复提交问题,比如:

点击提交按钮两次。 点击刷新按钮。 使用浏览器后退按钮重复之前的操作,导致重复提交表单。 使用浏览器历史记录重复提交表单。 浏览器重复的HTTP请求。

  几种防止表单重复提交的方法

  1.禁掉提交按钮。表单提交后使用Javascript使提交按钮disable。这种方法防止心急的用户多次点击按钮。但有个问题,如果客户端把Javascript给禁止掉,这种方法就无效了。

  我之前的文章曾说过用一些Jquery插件效果不错。

  2.Post/Redirect/Get模式。在提交后执行页面重定向,这就是所谓的Post-Redirect-Get (PRG)模式。简言之,当用户提交了表单后,你去执行一个客户端的重定向,转到提交成功信息页面。

  这能避免用户按F5导致的重复提交,而其也不会出现浏览器表单重复提交的警告,也能消除按浏览器前进和后退按导致的同样问题。

  3.在session中存放一个特殊标志。当表单页面被请求时,生成一个特殊的字符标志串,存在session中,同时放在表单的隐藏域里。接受处理表单数据时,检查标识字串是否存在,并立即从session中删除它,然后正常处理数据。

  如果发现表单提交里没有有效的标志串,这说明表单已经被提交过了,忽略这次提交。

  这使你的web应用有了更高级的XSRF保护。

  4.在数据库里添加约束。在数据库里添加唯一约束或创建唯一索引,防止出现重复数据。这是最有效的防止重复提交数据的方法。

以上就是这4种方法的介绍了,小伙伴们如果有更好的解决方法,也请告之,本文将持续更新。

 
标签: 表单 重复提交
反对 0举报 0 评论 0
 

免责声明:本文仅代表作者个人观点,与乐学笔记(本网)无关。其原创性以及文中陈述文字和内容未经本站证实,对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺,请读者仅作参考,并请自行核实相关内容。
    本网站有部分内容均转载自其它媒体,转载目的在于传递更多信息,并不代表本网赞同其观点和对其真实性负责,若因作品内容、知识产权、版权和其他问题,请及时提供相关证明等材料并与我们留言联系,本网站将在规定时间内给予删除等相关处理.

  • 【踩坑】【React】 antd 动态表单获取和设置值
    真是个悲伤的故事,由于动态表单里面嵌套动态表单,然后就不知道怎么获取和设置值了,然后公司的小朋友教我了QAQ动态表单为totalStrategy:{strategy:{mainArea:123,mainPublicArea:456,},strategy:{mainArea:123,mainPublicArea:456,}}获取 form.getFieldVal
    03-08
  • React 关于Ant Design中Form表单组件化使用的相应记录
    React 关于Ant Design中Form表单组件化使用的相
    基础的就是Ant Design的Form组件传送门:https://ant.design/components/form-cn/在最初的项目中,由于我要用到Form,所以不得不把每个带表单的页面(不管表单复杂与否)单独放在一个JS文件中,然后就不得不涉及父子组件通信方面的问题。基本结构是这样的 1 c
    03-08
  • React中的表单处理 react 提交表单
    React的表单算是React的一个坑了,由于React在浏览器显示的是虚拟的DOM,我们在表单输入值后直接提交,是无法获取到这个值的。对此,官方给出的解决办法是:先把输入的值存放在组件的状态(state)中,之后通过状态的改变更新页面内容,从而显示出正确的值,
    03-08
  • [select][option][checkbox]">HTML标签天天练7-
    ——继续form表单的第二篇学习:有些时候,需要调用到一些下拉选项,比如国家、省份、城市,等等,但既要保证页面的整齐洁净,又要实现功能的情况下,我们就可以使用下拉式的选项:如下:htmlbodyformselect name="coutry"option value="american"American/op
    03-08
  • [text][password][radio]">HTML标签天天练7--表
        别小看了这一个标签,里面包含着丰富的内容,是为了让浏览者能输入用户名及更多信息而定义的!从这篇文章起,将分几次讲述form里面的各种标签及属性,让大家一目了然:form意为表单,让用户输入单据里的项目信息,以便于提交给网站。如(复制到DW尝试)
    03-08
  • [action][submit][reset]">HTML标签天天练7--表
       ——上一次讲述了多项选择和下拉表单。这次继续讲另一些新功能:既然有了输入框,我们应该再加上一个按键,让用户点击提交,对吧!?如下(请复制到DW中尝试):htmlbodyform action="/acb.asp" method="get"p用户名: input type="text" name="name" //pp
    03-08
  • [textarea]到此 表单学习结束">HTML标签天天练7
    ——继续上一篇内容,用户在输入文本的时候,我们要保证有一定的区域,比如写一些自述:如下:htmlbodyp输入您的个人描述:/ptextarea rows="10" cols="30"个人描述:/textareap注意,rows代表列高,cols代表列宽!/p/body/html ——另有一种fieldset标签可以
    03-08
  • HTML中让表单input等文本框为只读不可编辑的方
    转载  http://www.jb51.net/web/62128.html 有时候,我们希望表单中的文本框是只读的,让用户不能修改其中的信息,如使input type="text" name="input1" value="中国" 的内容,"中国"两个字不可以修改。实现的方式归纳一下,有如下几种。 方法1: onfocus=t
    03-08
  • HTML表单里的Label标签 label htmlfor
    在Dreamweaver中,只要一加入表单或表单对象,文本框等等,就会在代码中加入一个label/label,一直没明白这个label是做什么的,今天正好看到了解释:Label 中有两个属性是非常有用的,一个是FOR、另外一个就是ACCESSKEY了。 FOR属性 功能:表示Label标签要绑
    03-08
  • Html5 表单验证和style css验证支持
    原文链接:http://www.javaarch.net/jiagoushi/693.htm  Html5 表单验证和style css验证支持 看看下面的这个示例: h2Login/h2form action="" autocomplete="off"label for="username"Username/labelinputrequired!-- Credit: http://stackoverflow.com/q
    03-08
点击排行