JavaScript常见防止表单重复提交的方法

1.onsubmit（）事件的运用(s为小写)

前端页面

<form action="DoFormServlet" method="get" onsubmit="return dosubmit()">
    用户名：<input type="text" name="username">
    <input type="submit" value="提交" id="submit">
  </form>

Servlet

public class DoFormServlet extends javax.servlet.http.HttpServlet {
    protected void doPost(javax.servlet.http.HttpServletRequest request, javax.servlet.http.HttpServletResponse response) throws javax.servlet.ServletException, IOException {
          doGet(request,response);
    }

    protected void doGet(javax.servlet.http.HttpServletRequest request, javax.servlet.http.HttpServletResponse response) throws javax.servlet.ServletException, IOException {
        request.setCharacterEncoding("UTF-8");
        String userName = request.getParameter("username");
        try{
           //让当前的线程睡眠3秒钟，模拟网络延迟而导致表单重复提交的现象
            Thread.sleep(3*1000);
        } catch (InterruptedException e) {
            e.printStackTrace();
        }
        System.out.println("向数据库中插入数据：" + userName);
    }
}

JavaScript

<script type="text/javascript">
      var isMark = false; //表单是否已经提交的标识，默认为false
      function dosubmit() {
          if(isMark == false){
              isMark = true; //提交表单是否已经提交的标识设置为true
              return true; //返回true让表单正常提交
          }else{
              return false; //返回为false那么表单将不提交
          }
      }
    </script>

2.提交按钮设置不可用或隐藏（在上面的基础上改一下JavaScript代码就可以了）

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

disabled为禁用属性
web.xml

<servlet>
        <servlet-name>DoFormServlet</servlet-name>
        <servlet-class>com.servlet.DoFormServlet</servlet-class>
    </servlet>
    <servlet-mapping>
        <servlet-name>DoFormServlet</servlet-name>
        <url-pattern>/DoFormServlet</url-pattern>
    </servlet-mapping>

在平时开发中，如果网速比较慢的情况下，用户提交表单后，发现服务器半天都没有响应，那么用户可能会以为是自己没有提交表单，就会再点击提交按钮重复提交表单，我们在开发中必须防止表单重复提交。
场景一：在网络延迟的情况下让用户有时间点击多次submit按钮导致表单重复提交
场景二：表单提交后用户点击【刷新】按钮导致表单重复提交
场景三：用户提交表单后，点击浏览器的【后退】按钮回退到表单页面后进行再次提交
JavaScript在客户端能解决场景一，但场景二、三还不能够解决。对于【场景二】和【场景三】导致表单重复提交的问题，既然客户端无法解决，那么就在服务器端解决，在服务器端解决就需要用到session了。
我们下篇介绍：利用Session防止表单重复提交

JavaScript常见防止表单重复提交的方法

猜你喜欢