JavaWeb防止表单重复提交的几种方式

╰+哭是因爲堅強的太久メ 2021-12-20 16:37 298阅读 0赞

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

1.  网络延迟的情况下用户多次点击submit按钮导致表单重复提交
2.  用户提交表单后，点击【刷新】按钮导致表单重复提交（点击浏览器的刷新按钮，就是把浏览器上次做的事情再做一次，因为这样也会导致表单重复提交）
3.  用户提交表单后，点击浏览器的【后退】按钮回退到表单页面后进行再次提交  
    二、防止防止表单重复提交的方式  
    1、利用JavaScript防止表单重复提交  
    （1）、用JavaScript控制Form表单只能提交一次  
    主要代码：

<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>

（2）、将提交按钮设置为不可用

主要代码：

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

（3）、验证码  
页面上添加验证码，不管验证输入正确与否，提交后均刷新验证码。

（4）、ajax提交加锁  
采用ajax方式提交表单时，设置一个布尔变量（true/false），当然其他类型变量也可以。初始时为true可以提交,在前端向服务器发出请求后，服务端响应结果没有回来之前将该值置为false，正常响应时再置为true。

（5）、提交后重定向到一个提交成功的页面  
表单提交后跳转到另外一个成功页面。这样可以避免用户按F5导致的重复提交，浏览器也不会出现表单重复提交的警告，以及消除按浏览器前进和后退按导致的同样问题。

（6）、服务端生成一个唯一的token  
首先在服务端生成一个token保证唯一性，然后将这个token保存在session或者redis等缓存中。与此同时将token放到页面的隐藏input中，发给浏览器。用户在页面上提交时带着这个token一块提交到服务端，服务端通过比对token的值。如果相等代表首次提交，此时将session或者缓存中保存的token值remove掉，反之则认为重复提交，服务端不予处理。

（7）、cookie记录表单提交的状态  
使用Cookie记录表单提交的状态，根据其状态可以检查是否已经提交过表单。跟上一种类似，服务端生成token存入Cookie，表单提交时将Cookie中token和服务端token比对。

（8）、数据库添加唯一索引约束  
向数据库字段添加一个唯一索引。如果表单重复提交，那么数据库插入重复记录时，唯一约束能有效避免重复入库。这样控制的话，日志会出现Your program attempts to store duplicate values in a database column that is constrained by a unique index的报错信息，看着有点不爽。