防止表单重复提交思路分析
出现重复提交的场景一般是在网速比较慢,服务器返回时间较长,导致用户以为没有提交成功或者习惯性的多点几次提交按钮。开发中必须杜绝重复提交问题。
一、出现重复提交表单的场景
场景一:在网络延迟的情况下让用户有时间点击多次submit按钮导致表单重复提交;
场景二:表单提交后用户点击【刷新】按钮导致表单重复提交;
场景三:用户提交表单后,点击浏览器的【后退】按钮回退到表单页面后进行再次提交。
二、利用JavaScript防止表单重复提交
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%> <!DOCTYPE HTML> <html> <head> <title>Form表单</title> <script type="text/javascript"> var isCommitted = false;//表单是否已经提交标识,默认为false function dosubmit(){ if(isCommitted==false){ isCommitted = true;//提交表单后,将表单是否已经提交标识设置为true return true;//返回true让表单正常提交 }else{ return false;//返回false那么表单将不提交 } } </script> </head> <body> <form action="${pageContext.request.contextPath}/servlet/DoFormServlet" onsubmit="return dosubmit()" method="post"> 用户名:<input type="text" name="username"> <input type="submit" value="提交" id="submit"> </form> </body> </html>
除了用这种方式之外,经常见的另一种方式就是表单提交之后,将提交按钮设置为不可用,让用户没有机会点击第二次提交按钮,代码如下:
function dosubmit(){ //获取表单提交按钮 var btnSubmit = document.getElementById("submit"); //将表单提交按钮设置为不可用,这样就可以避免用户再次点击提交按钮 btnSubmit.disabled= "disabled"; //返回true让表单可以正常提交 return true; }
使用JavaScript防止表单重复提交的做法只对上述提交到导致表单重复提交的三种场景中的【场景一】有效,而对于【场景二】和【场景三】是没有用,依然无法解决表单重复提交问题。
三、利用Session防止表单重复提交
对于【场景二】和【场景三】导致表单重复提交的问题,既然客户端无法解决,那么就在服务器端解决,在服务器端解决就需要用到session了。
具体的做法:在服务器端生成一个唯一的随机标识号,专业术语称为Token(令牌),同时在当前用户的Session域中保存这个Token。然后将Token发送到客户端的Form表单中,在Form表单中使用隐藏域来存储这个Token,表单提交的时候连同这个Token一起提交到服务器端,然后在服务器端判断客户端提交上来的Token与服务器端生成的Token是否一致,如果不一致,那就是重复提交了,此时服务器端就可以不处理重复提交的表单。如果相同则处理表单提交,处理完后清除当前用户的Session域中存储的标识号。
在下列情况下,服务器程序将拒绝处理用户提交的表单请求:
- 存储Session域中的Token(令牌)与表单提交的Token(令牌)不同。
- 当前用户的Session中不存在Token(令牌)。
- 用户提交的表单数据中没有Token(令牌)。
四、利用redis锁机制
key值可以是请求路径+用户的唯一标识,在finally中释放锁或者结合设置key过期时间。
另外,防止用户重复支付也可以应用,key为订单号,配合数据库订单支付状态查询判断。幂等性接口设计。