防止刷新或后退页面重复提交表单

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

场景一:在网络延迟的情况下让用户有时间点击多次submit按钮导致表单重复提交
场景二:表单提交后用户点击【刷新】按钮导致表单重复提交,注意:刷新的时候会自动提交form表单
场景三:用户提交表单后,点击浏览器的【后退】按钮回退到表单页面后进行再次提交

二、如何解决

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

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

方法2:将提交按钮设置为不可用,让用户没有机会点击第二次提交按钮

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

方法3:将提交按钮隐藏起来
解释:这种做法和将提交按钮设置为不可用是差不多的,个人觉得将提交按钮隐藏影响到页面布局的美观,并且可能会让用户误以为是bug(怎么我一点击按钮,按钮就不见了呢?用户可能会有这样的疑问)
方法4:重定向到我们想要显示的页面
解释:不解释了,就是一个重定向
方法5:利用Session防止表单重复提交
介绍:
如果用户后退或者刷新页面,上面4个方法都没有用,既然客户端无法解决,那么就在服务器端解决,在服务器端解决就需要用到session了
具体做法:
在服务器端生成一个唯一的随机标识号,专业术语称为Token(令牌),同时在当前用户的Session域中保存这个Token。然后将Token发送到客户端的Form表单中,在Form表单中使用隐藏域来存储这个Token,表单提交的时候连同这个Token一起提交到服务器端,然后在服务器端判断客户端提交上来的Token与服务器端生成的Token是否一致,如果不一致,那就是重复提交了,此时服务器端就可以不处理重复提交的表单。如果相同则处理表单提交,处理完后清除当前用户的Session域中存储的标识号。
在下列情况下,服务器程序将拒绝处理用户提交的表单请求:
1、存储Session域中的Token(令牌)与表单提交的Token(令牌)不同。
2、当前用户的Session中不存在Token(令牌)

具体实现:
servlet页面:
在这里插入图片描述
表单页面:在这里插入图片描述
表单提交判断功能的servlet页面:
防止刷新或后退页面重复提交表单_第1张图片

你可能感兴趣的:(java学习之路)