Deprecated: 函数 get_currentuserinfo 自版本 4.5.0 起已弃用!请使用 wp_get_current_user() 替代。 in /data/home/qxu1142130176/htdocs/wp-includes/functions.php on line 5383
最新消息:

JavaWeb防止表单重复提交

Java 前端收藏 1632浏览

在JavaWeb方向做开发的小伙伴们,肯定都会遇到表单重复提交的问题。

这种问题出现的原因或者说应用场景大致如下:

  1. 网络延迟,服务器未能及时做出响应,导致用户不断重复点击提交按钮
  2. 用户双击有意识的双击或者多次点击提交按钮
  3. F5刷新页面
  4. 点击浏览器后退按钮

归根结底,都是由于浏览器重复发起HTTP请求所致。

那么处理的方法有哪些呢?

于是搜集了下网上一些方法,方便以后查看。同时也可以给小伙伴儿们参考参考,避免走一些弯路。

其中的方法,有些是鄙人在实际工作中亲自用到过。

有些虽并未用到,但是从解决思路上来说,也是行之有效的。

解决方案主要分为客户端(浏览器)和服务端以及数据库。

  • js禁用提交按钮

这种方式是一种比较简单也比较常用的方法。当用户提交完表单后,用javascript禁用提交按钮让按钮不可点击。也就是设置disabled属性为disabled或者true即可。

  • 按钮倒计时

页面上表单提交后,将按钮置灰不可点击后加入倒计时,比如5秒或者10秒后按钮恢复点击状态才能再次提交。这种方式也可以避免大量请求,减轻服务端访问的压力。

  • 验证码

页面上添加验证码,不管验证输入正确与否,提交后均刷新验证码。

  • ajax提交加锁

采用ajax方式提交表单时,设置一个布尔变量(true/false),当然其他类型变量也可以。初始时为true可以提交,在前端向服务器发出请求后,服务端响应结果没有回来之前将该值置为false,正常响应时再置为true。

  • 提交后重定向到一个提交成功的页面

表单提交后跳转到另外一个成功页面。这样可以避免用户按F5导致的重复提交,浏览器也不会出现表单重复提交的警告,以及消除按浏览器前进和后退按导致的同样问题。

  • 服务端生成一个唯一的token

首先在服务端生成一个token保证唯一性,然后将这个token保存在session或者redis等缓存中。与此同时将token放到页面的隐藏input中,发给浏览器。用户在页面上提交时带着这个token一块提交到服务端,服务端通过比对token的值。如果相等代表首次提交,此时将session或者缓存中保存的token值remove掉,反之则认为重复提交,服务端不予处理。

  • cookie记录表单提交的状态

使用Cookie记录表单提交的状态,根据其状态可以检查是否已经提交过表单。跟上一种类似,服务端生成token存入Cookie,表单提交时将Cookie中token和服务端token比对。

  • 数据库添加唯一索引约束

向数据库字段添加一个唯一索引。如果表单重复提交,那么数据库插入重复记录时,唯一约束能有效避免重复入库。这样控制的话,日志会出现Your program attempts to store duplicate values in a database column that is constrained by a unique index的报错信息,看着有点不爽。

大概也就这些吧,如有大神有更好的解决方法还往不吝赐教。

一般建议这些前后端方法共同结合的双重机制来保证重复提交的问题。

如果真正重复提交了,后端始终返回同样结果,也就是保证提交操作的幂等性。

这样就确保万无一失啦。

 

 

转载请注明:前端收藏 » JavaWeb防止表单重复提交