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

form重复提交场景

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

解决方案

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

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

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

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

复制代码
<%@ 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防止表单重复提交的做法只对上述提交到导致表单重复提交的三种场景中的【场景1】有效，而对于【场景2】和【场景3】是没有用，依然无法解决表单重复提交问题。

 

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

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

具体的做法：

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

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

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

复制代码
<?php
  session_start();
  if ($_SERVER['REQUEST_METHOD'] === 'POST' && !empty($_POST['token'])) {
    $token = $_POST['token'];
    if ($_SESSION['token'] === $token) {
      //处理表单数据
      //...
      unset($_SESSION['token']);
    } else {
      echo '表单已提交！';
    }
  } else {
    $token = md5(uniqid(rand(), true));
    $_SESSION['token'] = $token;
?>
  <form method="post">
    <input type="hidden" name="token" value="<?php echo $token; ?>" />
    <!--其他表单元素-->
    <button type="submit">提交</button>
  </form>
<?php } ?>
复制代码

 

三：使用重定向

在提交表单之后，如果你还使用相同的URL，会导致表单被重复提交。为了避免这种情况，你可以使用重定向。这种技术涉及到一个中间页面，可以在表单提交后，将用户重定向到另一个页面，而不是原始的表单页面。

以下是一个使用重定向来防止重复提交表单的示例：

<?php
  if ($_SERVER['REQUEST_METHOD'] === 'POST') {
    //处理表单数据
    //...
    header('Location: success.php');
    exit;
  }
?>

 

在这个例子中，我们在处理完表单数据之后，使用header函数将用户重定向到success.php页面。这个页面是一个在提交成功后显示的页面，它不包含任何表单，因此用户无法使用浏览器的“后退”按钮或重新加载页面来重复提交表单。

 

更多:http://www.shanhubei.com/archives/55262.html

posted @   珊瑚贝博客  阅读(903)  评论(0)  编辑  收藏  举报
相关博文：
· WordPress删除数据中标题重复文章的方法
· Laravel 代码重构：使用 Services, Events, Jobs, Actions 来重构控制器方法
· php 防止表单重复提交的方法集合
· 表单重复提交解决办法
· 防止表单重复提交的方法
阅读排行：
· 阿里最新开源QwQ-32B，效果媲美deepseek-r1满血版，部署成本又又又降低了！
· 单线程的Redis速度为什么快？
· SQL Server 2025 AI相关能力初探
· AI编程工具终极对决：字节Trae VS Cursor，谁才是开发者新宠？
· 展开说说关于C#中ORM框架的用法！
点击右上角即可分享
微信分享提示
AI IDE Trae