在平时开发中,如果网速比较慢的情况下,用户提交表单后,发现服务器半天都没有响应,
那么用户可能会以为是自己没有提交表单,就会再点击提交按钮重复提交表单,我们在开发中必须防止表单重复提交。
重复提交的几个场景
场景一
在网络延迟的情况下让用户有时间点击多次submit按钮导致表单重复提交
场景二
表单提交后用户点击【刷新】按钮导致表单重复提交,点击浏览器的刷新按钮,
就是把浏览器上次做的事情再做一次,因为这样也会导致表单重复提交。
场景三
用户提交表单后,使用浏览器【后退】按钮重复之前的操作,导致重复提交表单。
解决办法
JavaScript方案
针对【场景一】,可通过页面前端的JavaScript方案来解决重复提交问题。
可通过javascript来防止表单重复提交,表单提交之后,
将提交按钮设置为不可用,让用户没有机会点击第二次提交按钮,代码如下:
1 | function dosubmit(){ |
Session方案
对于【场景二】和【场景三】导致表单重复提交的问题,既然客户端无法解决,
那么就在服务器端解决,在服务器端解决就需要用到session了。
具体的做法:在服务器端生成一个唯一的随机标识号,专业术语称为Token(令牌),同时在当前用户的Session域中保存这个Token。
然后将Token发送到客户端的Form表单中,在Form表单中使用隐藏域来存储这个Token,
表单提交的时候连同这个Token一起提交到服务器端,然后在服务器端判断客户端提交上来的Token与服务器端生成的Token是否一致,
如果不一致,那就是重复提交了,此时服务器端就可以不处理重复提交的表单。如果相同则处理表单提交,
处理完后清除当前用户的Session域中存储的标识号。
在下列情况下,服务器程序将拒绝处理用户提交的表单请求:
- 存储Session域中的Token(令牌)与表单提交的Token(令牌)不同。
- 当前用户的Session中不存在Token(令牌)。
- 用户提交的表单数据中没有Token(令牌)。
具体的例子:
1.创建FormServlet,用于生成Token(令牌)和跳转到form.jsp页面
1 | package xdp.gacl.session; |
生成Token的工具类TokenProccessor:
1 | package xdp.gacl.session; |
2.在form.jsp中使用隐藏域来存储Token(令牌)
1 | <%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%> |
3.DoFormServlet处理表单提交
1 | package xdp.gacl.session; |
使用Post/Redirect/Get模式
针对【场景二】和【场景三】,除了使用Session方案,还有一种方案可以实现。
这就是所谓的 Post-Redirect-Get (PRG)模式。
简言之,当用户提交了表单后,你去执行一个客户端的重定向,转到提交成功信息页面。
这能避免用户按F5导致的重复提交,而其也不会出现浏览器表单重复提交的警告,也能消除按浏览器前进和后退按导致的同样问题。