防止form表单重复提交的几种方案

时间：2025-04-18 07:20:51

阅读目录

    • 前言
    • form重复提交场景
    • 解决方案
      • 一：前端利用JavaScript防止表单重复提交
      • 二：利用Session防止表单重复提交
      • 三：使用重定向也可以解决form表单重复提交问题
    • 参考

前言

如果网速比较慢的情况下，用户点击的提交发现半天没有反映，于是又重新点击了几次提交按钮，这就造成了重复提交的问题。那么在我们的开发中必须解决这种重复提交的问题。比如有个需要用户填写用户名和密码然后提交到后台进行登录验证的一个提交，重复提交主要体现如下几种场景：

form重复提交场景

  • 场景1：在网络延迟的情况下让用户有时间点击多次submit按钮导致表单重复提交。
    具体行为：在网络比较慢的情况下，用户连续快速的点击多次提交按钮。
  • 场景2：表单提交后用户点击【刷新】按钮导致表单重复提交。
    具体行为：用户点击了提交按钮，然后点击浏览器上的【刷新】按钮对form表单又进行一次提交。
  • 场景3：用户提交表单后，点击浏览器的【后退】按钮回退到表单页面后进行再次提交。

解决方案

防止用户重复提交主要有如下几种解决方案：

一：前端利用JavaScript防止表单重复提交

这种方法是使用户第二次点击提交按钮时是不起作用的。
该方案尚且可以应对用户通过前端正常访问网页时，重复提交的问题, 但是对于稍微懂点html知识的人来说，他可以打开控制台修改属性，该方案在非正常访问的时候，就会失效。

在客户端的js代码中设置一个标识位，第一次提交后将标志位设置成true。js代码如下：

<%@ page language="java" import=".*" 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="${}/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 = ("submit");
     //将表单提交按钮设置为不可用，这样就可以避免用户再次点击提交按钮
     = "disabled";
     //返回true让表单可以正常提交
     return true;
 }

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

二：利用Session防止表单重复提交

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

具体的做法：

  1. 获取用户填写用户名和密码的页面时向后台发送一次请求，这时后台会生成唯一的随机标识号，专业术语称为Token(令牌)。

  2. 将Token发送到客户端的Form表单中，在Form表单中使用隐藏域来存储这个Token，表单提交的时候连同这个Token一起提交到服务器端。

  3. 服务器端判断客户端提交上来的Token与服务器端生成的Token是否一致，如果不一致，那就是重复提交了，此时服务器端就可以不处理重复提交的表单。如果相同则处理表单提交，处理完后清除当前用户的Session域中存储的标识号。

看具体的范例：

  1. 创建FormServlet，用于生成Token(令牌)和跳转到页面
import java.io.IOException;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
 
public class FormServlet extends HttpServlet {
    private static final long serialVersionUID = -884689940866074733L;
 
    public void doGet(HttpServletRequest request, HttpServletResponse response)
             throws ServletException, IOException {
 
        String token =  UUID.randomUUID().toString() ;//创建令牌
        System.out.println("在FormServlet中生成的token："+token);
         request.getSession().setAttribute("token", token);  //在服务器使用session保存token(令牌)
         request.getRequestDispatcher("/").forward(request, response);//跳转到页面
     }
 
     public void doPost(HttpServletRequest request, HttpServletResponse response)
             throws ServletException, IOException {
         doGet(request, response);
     }
 
}
  1. 在中使用隐藏域来存储Token(令牌)
<%@ page language="java" import=".*" pageEncoding="UTF-8"%>
  <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
  <html>
  <head>
  <title>form表单</title>
  </head>
  
  <body>
      <form action="${}/servlet/DoFormServlet" method="post">
         <%--使用隐藏域存储生成的token--%>
         <%--
             <input type="hidden" name="token" value="<%=("token") %>">
         --%>
         <%--使用EL表达式取出存储在session中的token--%>
         <input type="hidden" name="token" value="${token}"/> 
         用户名：<input type="text" name="username"> 
         <input type="submit" value="提交">
     </form>
 </body>
 </html>
  1. DoFormServlet处理表单提交
import java.io.IOException;
  import javax.servlet.ServletException;
  import javax.servlet.http.HttpServlet;
  import javax.servlet.http.HttpServletRequest;
  import javax.servlet.http.HttpServletResponse;
  
  public class DoFormServlet extends HttpServlet {
 
     public void doGet(HttpServletRequest request, HttpServletResponse response)
                 throws ServletException, IOException {
 
             boolean b = isRepeatSubmit(request);//判断用户是否是重复提交
             if(b==true){
                 System.out.println("请不要重复提交");
                 return;
             }
             request.getSession().removeAttribute("token");//移除session中的token
             System.out.println("处理用户提交请求！！");
         }
         
         /**
          * 判断客户端提交上来的令牌和服务器端生成的令牌是否一致
          * @param request
          * @return 
          *         true 用户重复提交了表单 
          *         false 用户没有重复提交表单
          */
         private boolean isRepeatSubmit(HttpServletRequest request) {
             String client_token = request.getParameter("token");
             //1、如果用户提交的表单数据中没有token，则用户是重复提交了表单
             if(client_token==null){
                 return true;
             }
             //取出存储在Session中的token
             String server_token = (String) request.getSession().getAttribute("token");
             //2、如果当前用户的Session中不存在Token(令牌)，则用户是重复提交了表单
             if(server_token==null){
                return true;
             }
             //3、存储在Session中的Token(令牌)与表单提交的Token(令牌)不同，则用户是重复提交了表单
             if(!client_token.equals(server_token)){
                 return true;
             }
             
             return false;
         }
 
     public void doPost(HttpServletRequest request, HttpServletResponse response)
             throws ServletException, IOException {
         doGet(request, response);
     }
 
 }

通过这种方式处理表单重复提交，可以解决上述的场景二和场景三中出现的表单重复提交问题。
在实际的项目中一般前台ui和后台都要防止重复提交。

三：使用重定向也可以解决form表单重复提交问题

form表单提交请求处理完后，使用redirect:path, 进行页面跳转。

参考

使用Session防止表单重复提交

相关文章