如何防止表单数据重复提交

矫情吗；* 2023-06-21 07:20 26阅读 0赞

### 背景 ###

有时候我们希望避免表单重复提交，比如网络慢，点击页面提交按钮后无反应，用户重复多次点击导致多次提交请求给后端接口。

注意以下的实践是基于前后端分离的开发，并且后端接口是不管session会话的无状态服务器的接口。

### 如何防重复提交 ###

#### 前端措施 ####

前端可以在点击按钮后进入一段时间的loading，让按钮在loading期间不可再次点击。

loading的时长可以直到后端接口返回，也可以自己定义一个较短的时间，比如2秒。

#### 后端措施 ####

##### 情况一 #####

这种情况适用于提交的表单数据有一个比较唯一的标识，比如 “名字”。后续会解释为什么这种方案需要这个 “名字”。

伪代码

// 存在此key返回false，timeout设置成较短时间，如2秒
    String key = userId + 名字;
    if (!redis.setIfAbsent(key, timeout)) { 
        throw new RuntimeException("请勿重复提交");
    }
    
    // 执行保存表单数据的逻辑

*  上述逻辑能够避免同一个用户在2秒内提交相同名字的数据。
 *  因为key有userId，即使 “名字” 相同也仅仅影响当前用户
 *  注意 `redis.setIfAbsent(key, timeout)` 要保证原子性，可以用lua脚本保证
 *  在这个例子里，“名字” 就是比较唯一的标识，“比较唯一” 的意思是可以重复但是不经常重复。

比如说保存一篇文章的表单数据，这里的 “名字” 就可以是文章的标题。如果提交的表单没有比较唯一的字段，比如下一个商品的订单，那就不太适用于这种方案来避免表单重复提交。

*  思考：为什么没有比较唯一的名字就不太适合?  
    因为 “没有比较唯一的名字” 的时候比较难标识这是用户重复提交的数据，“比较唯一” 就是说平时差异度还是比较大的，能避免误杀。

##### 情况二 #####

没有比较唯一的名字的情况，如何避免表单重复提交?

在进入表单填写页面之前，前端调用后端接口，后端生成uuid并将该uuid作为key写入redis中，并将该uuid返回给前端。

当提交表单的时候前端把表单数据、该uuid一并传给后端接口，后端接口比对redis中是否存在该uuid的key，存在则删除key并执行保存表单的逻辑；不存在则提示"请勿重复提交表单"。

写入到redis的uuid的key，可以设置超时时间，比如一天时间。

*  有个细节：如果用户进入表单填写页，得到uuid，在超过一天后用户再首次提交表单信息，这时候后端的该key已经超时消失了，这时还提醒 “请勿重复提交表单” 似乎不太准确，可以将文案改成 “请勿重复提交表单，或页面已过时请重新刷新”

发表评论取消回复

表情：

评论列表（有 0 条评论，26人围观）

还没有评论，来说两句吧...

相关阅读

相关 java 防止表单重复提交

防止表单重复提交，或者是防止按F5 刷新提交表单。在WEB开发中是经常会碰到这样的问题的。目前主流的解决方法有以下三种： 1、采用脚本来解决 2、重定向到别的页面

快来打我*/ 2024年02月19日 21:37/ 0 赞/ 117 阅读

相关防止表单重复提交

什么是表单重复提交：由于网速问题，用户不端点击提交按钮，或者刷新页面。或，已经提交成功，用户点击后退，然后恶意刷新页面形成重复提交的问题。一）、令牌机制：在struts

╰半橙微兮°/ 2024年02月17日 22:50/ 0 赞/ 72 阅读

相关如何防止表单重复提交

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

你的名字/ 2023年10月17日 11:34/ 0 赞/ 236 阅读

相关表单重复提交（token防止表单重复提交）

1. 表单提交页面 <% String uuid=UUID.randomUUID.toString(); session.setAttrib

ゝ一纸荒年。/ 2023年07月03日 06:29/ 0 赞/ 35 阅读

相关如何防止表单数据重复提交

背景有时候我们希望避免表单重复提交，比如网络慢，点击页面提交按钮后无反应，用户重复多次点击导致多次提交请求给后端接口。注意以下的实践是基于前后端分离的开发，并且后端

矫情吗；*/ 2023年06月21日 07:20/ 0 赞/ 27 阅读

相关如何防止表单重复提交？

网络延迟时重复点击提交按钮，会发生重复提交表单的问题。解决办法: 数据库主键唯一提交成功后页面重定向按钮提交后隐藏或不可再点击后台生成页面

灰太狼/ 2023年05月21日 10:13/ 0 赞/ 2 阅读

相关 session防止表单重复提交

有一个生成表单号的sevlet public class FormServlet extends HttpServlet { private static

阳光穿透心脏的1/2处/ 2022年08月12日 05:29/ 0 赞/ 266 阅读

相关如何防止表单重复提交

方法一：基于客户端：利用javascript <script> var isCommitted=false; function checkPost()

水深无声/ 2022年07月12日 15:06/ 0 赞/ 358 阅读

相关防止表单重复提交

开发的项目中可能会出现下面这些情况： 1. 由于用户误操作，多次点击表单提交按钮。 2. 由于网速等原因造成页面卡顿，用户重复刷新提交页面。 3. 黑客或恶意用户使用p

深藏阁楼爱情的钟/ 2022年04月03日 14:14/ 0 赞/ 440 阅读

相关 php防止表单重复提交

后端防止重复提交的基本原理: 服务器返回表单页面时，会先生成一个subToken保存于session，并把该subToen传给表单页面。当表单提交时会带上subToken，

青旅半醒/ 2022年01月17日 10:47/ 0 赞/ 414 阅读