JavaWeb学习总结(十三)--使用session防止表单重复提交

[TOC]

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

一、表单重复提交的常见应用场景

有如下的form.jsp页面

<%--
  Created by IntelliJ IDEA.
  User: wuqinghua
  Date: 17/7/4
  Time: 上午8:33
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>Form表单</title>
</head>
<body>
<form action="${pageContext.request.contextPath}/repeatSubmitServlet" method="post">
    用户名：<input type="text" name="username" />
    <input type="submit" value="提交" id="submit" />
</form>
</body>
</html>

后台servlet

package org.wuqinghua.java.ch06;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;
import java.util.concurrent.TimeUnit;
/**
 * Created by wuqinghua on 17/7/4.
 */
@WebServlet(urlPatterns = "/repeatSubmitServlet")
public class RepeatSubmitServlet extends HttpServlet {
    @Override
    protected void service(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        req.setCharacterEncoding("UTF-8");
        String username = req.getParameter("username");
        try {
            TimeUnit.SECONDS.sleep(3);
        } catch (InterruptedException e) {
            e.printStackTrace();
        }
        System.out.println("向数据库中添加数据："+username);
    }
}

如果没有进行form表单重复提交处理，那么在网络延迟的情况下下面的操作将会导致form表单重复提交多次

1.1、场景一：在网络延迟的情况下让用户有时间点击多次submit按钮导致表单重复提交

　　演示动画如下所示：

1.2、场景二：表单提交后用户点击【刷新】按钮导致表单重复提交

演示动画如下所示：

　　点击浏览器的刷新按钮，就是把浏览器上次做的事情再做一次，因为这样也会导致表单重复提交。

1.3、场景三：用户提交表单后，点击浏览器的【后退】按钮回退到表单页面后进行再次提交

演示动画如下所示：

二、利用JavaScript防止表单重复提交

　　既然存在上述所说的表单重复提交问题，那么我们就要想办法解决，比较常用的方法是采用JavaScript来防止表单重复提交，具体做法如下：

修改form.jsp页面，添加如下的JavaScript代码来防止表单重复提交

<%--
  Created by IntelliJ IDEA.
  User: wuqinghua
  Date: 17/7/4
  Time: 上午8:33
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" isELIgnored="false" %>
<html>
<head>
    <title>Form表单</title>
    <script>
        var isCommitted = false;//表单
        function doSubmit(){
            if (!isCommitted){
                isCommitted=true;
                return true;
            }else{
                return false;
            }
        }
    </script>
</head>
<body>
<form action="${pageContext.request.contextPath}/repeatSubmitServlet" method="post"
      onsubmit="return doSubmit()">
    用户名：<input type="text" name="username" />
    <input type="submit" value="提交" id="submit" />
</form>
</body>
</html>

我们看看使用了JavaScript来防止表单提交重复是否可以成功，运行效果如下：

　　可以看到，针对”在网络延迟的情况下让用户有时间点击多次submit按钮导致表单重复提交“这个应用场景，使用JavaScript是可以解决这个问题的，解决的做法就是“用JavaScript控制Form表单只能提交一次“。

　　除了用这种方式之外，经常见的另一种方式就是表单提交之后，将提交按钮设置为不可用，让用户没有机会点击第二次提交按钮，代码如下：

function dosubmit(){
    //获取表单提交按钮
    var btnSubmit = document.getElementById("submit");
    //将表单提交按钮设置为不可用，这样就可以避免用户再次点击提交按钮
    btnSubmit.disabled= "disabled";
    //返回true让表单可以正常提交
    return true;
}

运行效果如下：

　　另外还有一种做法就是提交表单后，将提交按钮隐藏起来，这种做法和将提交按钮设置为不可用是差不多的，个人觉得将提交按钮隐藏影响到页面布局的美观，并且可能会让用户误以为是bug(怎么我一点击按钮，按钮就不见了呢？用户可能会有这样的疑问)，我个人在开发中用得比较多的是表单提交后，将提交按钮设置为不可用，反正使用JavaScript防止表单重复提交的做法都是差不多的，目的都是让表单只能提交一次，这样就可以做到表单不重复提交了。

　　使用JavaScript防止表单重复提交的做法只对上述提交到导致表单重复提交的三种场景中的【场景一】有效，而对于【场景二】和【场景三】是没有用，依然无法解决表单重复提交问题。

三、利用Session防止表单重复提交

　　对于【场景二】和【场景三】导致表单重复提交的问题，既然客户端无法解决，那么就在服务器端解决，在服务器端解决就需要用到session了。

　　具体的做法：在服务器端生成一个唯一的随机标识号，专业术语称为Token(令牌)，同时在当前用户的Session域中保存这个Token。然后将Token发送到客户端的Form表单中，在Form表单中使用隐藏域来存储这个Token，表单提交的时候连同这个Token一起提交到服务器端，然后在服务器端判断客户端提交上来的Token与服务器端生成的Token是否一致，如果不一致，那就是重复提交了，此时服务器端就可以不处理重复提交的表单。如果相同则处理表单提交，处理完后清除当前用户的Session域中存储的标识号。
　　在下列情况下，服务器程序将拒绝处理用户提交的表单请求：

存储Session域中的Token(令牌)与表单提交的Token(令牌)不同。
当前用户的Session中不存在Token(令牌)。
用户提交的表单数据中没有Token(令牌)。

看具体的范例：

　　1.创建FormServlet，用于生成Token(令牌)和跳转到form.jsp页面

<%--
  Created by IntelliJ IDEA.
  User: wuqinghua
  Date: 17/7/4
  Time: 上午8:33
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" isELIgnored="false" %>
<html>
<head>
    <title>Form表单</title>
</head>
<body>
<form action="${pageContext.request.contextPath}/repeatSubmitServlet" method="post">
    用户名：<input type="text" name="username" />
    <input type="hidden" name="token" value="${token}"/>
    <input type="submit" value="提交" id="submit" />
</form>
</body>
</html>

package org.wuqinghua.java.ch06;
import org.wuqinghua.java.repeat.TokenProccessor;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;
import java.util.concurrent.TimeUnit;
/**
 * Created by wuqinghua on 17/7/4.
 */
@WebServlet(urlPatterns = "/repeatSubmitServlet")
public class RepeatSubmitServlet extends HttpServlet {
    @Override
    protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        String token = TokenProccessor.getInstance().makeToken();
        req.getSession().setAttribute("token", token);
        req.getRequestDispatcher("form.jsp").forward(req, resp);
    }
    @Override
    protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws
            ServletException, IOException {
        req.setCharacterEncoding("UTF-8");
        if (!isRepeat(req)) {
            String username = req.getParameter("username");
            System.out.println("向数据库中添加数据：" + username);
        }
    }
    private boolean isRepeat(HttpServletRequest req) {
        String token = req.getParameter("token");
        if (token == null || "".equals(token)) {
            return true;
        }
        String sessionToken = (String) req.getSession().getAttribute("token");
        if (sessionToken == null || "".equals(sessionToken)) {
            return true;
        }
        if (!token.equals(sessionToken)) {
            return true;
        }
        req.getSession().removeAttribute("token");
        return false;
    }
}

package org.wuqinghua.java.ch06;
import org.wuqinghua.java.repeat.TokenProccessor;
import sun.misc.BASE64Encoder;
import sun.plugin2.message.Message;
import javax.xml.crypto.dsig.DigestMethod;
import java.security.MessageDigest;
import java.security.NoSuchAlgorithmException;
import java.util.Base64;
import java.util.Random;
/**
 * Created by wuqinghua on 17/7/4.
 */
public class TokenProcessor {
    /**
     * 单例设计模式
     * 1.把类的构造方法设计为私有的
     * 2.自己创建一个类的对象
     * 3.对外提供一个公共的方法，返回类的对象
     */
    private static TokenProccessor instance = new TokenProccessor();
    private TokenProcessor(){}
    public static TokenProccessor getInstance(){
        return instance;
    }
    public String makeToken(){
        String token = (System.currentTimeMillis()+new Random().nextInt(999999999))+"";
        try {
            MessageDigest md5 = MessageDigest.getInstance("md5");
            byte[] digest = md5.digest(token.getBytes());
            BASE64Encoder base64Encoder = new BASE64Encoder();
            return base64Encoder.encode(digest);
        } catch (NoSuchAlgorithmException e) {
            throw new RuntimeException(e);
        }
    }
}

首先访问FormServlet，在FormServlet中生成Token之后再重定向到form.jsp页面，这次是在服务器端处理表单重复提交的，运行效果如下：

　　从运行效果中可以看到，通过这种方式处理表单重复提交，可以解决上述的场景二和场景三中出现的表单重复提交问题。