平时开发中，如果在网速比较慢的情况下，用户提交表单后，发现服务器半天都没有响应，那么用户可能会以为是自己没有提交表单，就会再点击提交按钮重复提交表单，我们在开发中必须防止表单重复提交。
表单重复提交的常见应用场景
有如下的form.html页面。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<form action="/day07/DoFormServlet" method="post">
用户名:<input type="text" name="username" />
<input id="submit" type="submit" value="提交" />
</form>
</body>
</html>
form表单提交到DoFormServlet进行处理，处理表单提交请求。
package cn.liayun.form;
import java.io.IOException;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
//处理表单提交请求
@WebServlet("/DoFormServlet")
public class DoFormServlet extends HttpServlet {
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
String username = request.getParameter("username");
try {
//让当前的线程睡眠3秒钟，模拟网络延迟而导致表单重复提交的现象
Thread.sleep(1000 * 3);
} catch (InterruptedException e) {
e.printStackTrace();
}
System.out.println("向数据库中注册用户~~~~~");
}
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
doGet(request, response);
}
}
如果没有进行form表单重复提交处理，那么在网络延迟的情况下下面的操作将会导致form表单重复提交多次。
场景一：在网络延迟的情况下让用户有时间点击多次submit按钮导致表单重复提交
演示动画如下所示：
根据以上动画显示，多次点击submit按钮能导致表单重复提交。
场景二：表单提交后用户点击【刷新】按钮导致表单重复提交
演示动画如下所示：
点击浏览器的刷新按钮，就是把浏览器上次做的事情再做一次，因为这样也会导致表单重复提交。
场景三：用户提交表单后，点击浏览器的【后退】按钮回退到表单页面后进行再次提交
演示动画如下所示：
利用JavaScript防止表单重复提交
既然存在上述所说的表单重复提交问题，那么我们就要想办法解决，比较常用的方法是采用JavaScript来防止表单重复提交，具体做法如下：修改form.html页面，添加如下的JavaScript代码来防止表单重复提交。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
var iscommited = false;//表单是否已经提交标识，默认为false
function dosubmit() {
if (!iscommited) {//表单没有提交过，return true相当于让这个表单提交
iscommited = true;//提交表单后，将表单是否已经提交标识设置为true
return true;
} else {
return false;
}
}
</script>
</head>
<body>
<form action="/day07/DoFormServlet" method="post" onsubmit="return dosubmit()">
用户名:<input type="text" name="username" />
<input id="submit" type="submit" value="提交" />
</form>
</body>
</html>
我们看看使用了JavaScript来防止表单重复提交是否可以成功，运行效果如下：
可以看到，针对”在网络延迟的情况下让用户有时间点击多次submit按钮导致表单重复提交“这个应用场景，使用JavaScript是可以解决这个问题的，解决的做法就是用JavaScript控制form表单只能提交一次。除了用这种方式之外，经常见的另一种方式就是表单提交之后，将提交按钮设置为不可用，让用户没有机会点击第二次提交按钮，代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
function dosubmit() {
var input = document.getElementById("submit");
input.disabled = 'disabled';
return true;
}
</script>
</head>
<body>
<form action="/day07/DoFormServlet" method="post" onsubmit="return dosubmit()">
用户名:<input type="text" name="username" />
<input id="submit" type="submit" value="提交" />
</form>
</body>
</html>
运行效果如下：
另外还有一种做法就是提交表单后，将提交按钮隐藏起来，这种做法和将提交按钮设置为不可用是差不多的，个人觉得将提交按钮隐藏影响到页面布局的美观，并且可能会让用户误以为是bug(怎么我一点击按钮，按钮就不见了呢？用户可能会有这样的疑问)，我个人在开发中用得比较多的是表单提交后，将提交按钮设置为不可用，反正使用JavaScript防止表单重复提交的做法都是差不多的，目的都是让表单只能提交一次，这样就可以做到表单不重复提交了。
使用JavaScript防止表单重复提交的做法只对上述提到的导致表单重复提交的三种场景中的【场景一】有效，而对于【场景二】和【场景三】是没有效的，依然无法解决表单重复提交问题。
利用Session防止表单重复提交
对于【场景二】和【场景三】导致表单重复提交的问题，既然客户端无法解决，那么就在服务器端解决，在服务器端解决就需要用到Session了。原理：表单页面由Servlet程序生成，Servlet为每次产生的表单页面分配一个唯一的随机标识号，并在form表单的一个隐藏字段中设置这个标识号，同时在当前用户的Session域中保存这个标识号。当用户提交form表单时，负责处理表单提交请求的Serlvet得到表单提交的标识号，并与Session中存储的标识号比较，如果相同则处理表单提交，处理完后清除当前用户的Session域中存储的标识号。
这里，我参考了《JavaWeb学习总结(十三)——使用Session防止表单重复提交》中的表述：在服务器端生成一个唯一的随机标识号，专业术语称为Token(令牌)，同时在当前用户的Session域中保存这个Token。然后将Token发送到客户端的form表单中，在form表单中使用隐藏域来存储这个Token，表单提交的时候连同这个Token一起提交到服务器端，然后在服务器端判断客户端提交上来的Token与服务器端生成的Token是否一致，如果不一致，那就是重复提交了，此时服务器端就可以不处理重复提交的表单。如果相同则处理表单提交，处理完后清除当前用户的Session域中存储的标识号。在下列情况下，服务器程序将拒绝处理用户提交的表单请求：
- 存储在Session域中的表单标识号与表单提交的标识号不同；
- 当前用户的Session中不存在表单标识号；
- 用户提交的表单数据中没有标识号字段。
此处，我会举一个具体的范例。首先创建FormServlet，用于生成Token(令牌)和跳转到form.jsp页面，即由程序产生表单。
//产生表单
@WebServlet("/FormServlet")
public class FormServlet extends HttpServlet {
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
//产生一个随机数(即表单号)
TokenProcessor tp = TokenProcessor.getInstance();
String token = tp.generateToken();
/*
* token带给form.jsp，应存在session域里面，不应存在request域里面
* 因为等一会儿，客户机还要提交表单，我要看看提交过来的表单的表单号
* 和我产生的表单号是不是一致，还要用这个数据。
*/
request.getSession().setAttribute("token", token);
request.getRequestDispatcher("/form.jsp").forward(request, response);
}
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
doGet(request, response);
}
}
然后在form.jsp中使用隐藏域来存储Token(令牌)。
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
</head>
<body>
<form action="/day07/DoFormServlet" method="post">
<%--使用隐藏域存储生成的token，并使用EL表达式取出存储在session中的token--%>
<input type="hidden" name="token" value="${token }" />
用户名:<input type="text" name="username" />
<input type="submit" value="提交" />
</form>
</body>
</html>
紧接着，DoFormServlet处理表单提交。
package cn.liayun.form;
import java.io.IOException;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
//处理表单提交请求
@WebServlet("/DoFormServlet")
public class DoFormServlet extends HttpServlet {
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
//检查用户提交过来的表单号是否有效
boolean b = isTokenValid(request);
//如果返回false，意味着表单号无效，那么就阻止提交表单
if (!b) {
System.out.println("请不要重复提交");
return;
}
/*
* 如果返回true，意味着表单号有效，那么就允许提交表单。
* 处理表单提交之后(向数据库中注册用户)，表单号要置为无效，
* 即从服务器端把已经提交过来的表单号删掉。
*/
//先将服务器端的表单号删掉
request.getSession().removeAttribute("token");
//再处理表单提交
System.out.println("向数据库中注册用户~~~~~");
}
//判断表单号是否有效
private boolean isTokenValid(HttpServletRequest request) {
String client_token = request.getParameter("token");
//1.用户提交的表单数据中没有token，表单号无效，服务器程序将拒绝用户提交的表单请求
if (client_token == null) {
return false;
}
//取出存储在Session中的token
String server_token = (String) request.getSession().getAttribute("token");
//2.当前用户的Session中不存在Token(令牌)，表单号无效，服务器程序将拒绝用户提交的表单请求
if (server_token == null) {
return false;
}
//3.存储在Session中的Token(令牌)与表单提交的Token(令牌)不同，表单号无效，服务器程序将拒绝用户提交的表单请求
if (!client_token.equals(server_token)) {
return false;
}
return true;
}
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
doGet(request, response);
}
}
最后，编写工具类(TokenProcessor)生成表单标识号。令牌发生器发生的令牌一定要唯一，所以这时通常会把令牌发生器设计为单例的。为什么呢？反过来想，不把令牌发生器设计为单例的，意味着你要创建一个令牌，你要new一个令牌发生器，他要创建一个令牌，他也要new一个令牌发生器，即现在有多个对象创建多个随机数，那么是由一个对象创建随机数出现的重复概率低呢？还是由多个对象创建随机数出现的重复概率低呢？答案很显然，是由一个对象创建随机数出现的重复概率低！单例设计模式（保证类的对象在内存中只有一个）的步骤为：
- 把构造方法私有；
- 自己创建一个类的对象；
- 对外暴露一个方法，允许获取上面创建的对象。
public class TokenProcessor {//令牌
/*
* 1.把构造方法私有
* 2.自己创建一个
* 3.对外暴露一个方法，允许获取上面创建的对象
*/
private TokenProcessor() {}
private static final TokenProcessor instance = new TokenProcessor();
public static TokenProcessor getInstance() {
return instance;
}
public String generateToken() {
//1212313213 321343243254353 2133333333343242344444444124312
String token = System.currentTimeMillis() + new Random().nextInt() + "";
try {
MessageDigest md = MessageDigest.getInstance("md5");
byte[] md5 = md.digest(token.getBytes());//得到数据摘要
//base64编码
BASE64Encoder encoder = new BASE64Encoder();
return encoder.encode(md5);
//return new String(md5); //任意的二进制字节数组变成字符串，一定要查一个码表，任意的二进制字节数组中的数字在码表中不一定有，返回的100%是乱码！！！
} catch (NoSuchAlgorithmException e) {
throw new RuntimeException(e);
}
}
}
数据摘要即数据指纹，每一段数据都有一个指纹，如同每个人都有一个唯一的指纹一样，数据指纹是通过md5算法算得。通过md5算法算得的数据摘要共有128位，即16个字节长。温馨提示，md5算法技术，并不是我们通常意义上所说的加密，它只是得到数据摘要或数据指纹。其在实际开发中的应用场景如下：
- 用来保存用户的密码；
- 用来校验数据的完整性。
这里，我也简单地介绍一下base64算法。base64算法的原理是将每3个字节变成4个字节，那么每个字节只有6位，所以前2位补0。
至此，在服务器端利用Session防止表单重复提交，我们就已经实现了。下面就来看看实现的效果，首先访问FormServlet，在FormServlet中生成Token之后再重定向到form.jsp页面，这次是在服务器端处理表单重复提交的，运行效果如下：
从运行效果中可以看到，通过这种方式处理表单重复提交，可以解决上述的场景二和场景三中出现的表单重复提交问题。
扫一扫
526
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
