在客户端避免表单的重复提交

最新推荐文章于 2024-05-29 07:51:18 发布

110鸢飞

最新推荐文章于 2024-05-29 07:51:18 发布

阅读量479

点赞数

分类专栏： javascript 文章标签： javascript

本文链接：https://blog.csdn.net/u014426405/article/details/74150135

版权

javascript 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

当用户在表单中单击“提交”按钮进行提交操作时，可能由于服务器端响应的不及时，暂时没有收到提交成功的返回信息而再次点击“提交”按钮，导致同一表单被重复提交。而即使服务器端的响应很及时，也可能造成表单的重复提交，比如当服务器端在处理完用户的请求信息后，通过DispatcherServlet.forward()方法将用户请求转发到成功页面之后，若用户点击“刷新”按钮，则又将重复先前的请求操作。这是因为当使用DispatcherServlet.forward()方法时，浏览器的URL中保存的是先前表单提交时的URL，若采用HttpServletResponse.redirect()方法将用户的请求重定向到成功页面，则不会出现这个问题。

在客户端可以通过JavaScript脚本来控制表单提交的次数。我们可以在JavaScript脚本中设置一个变量，通过变量的true或false值来判断当前表单是否可以进行提交。主要代码如下：

index.jsp

<%@ page contentType="text/html;charset=utf-8" %>
<html>
    <head>
        <script type="text/javascript" src="index.js"></script>
        <title>登录页面</title>
    </head>
    <body>
        <form action="../handler" method="post" name="theForm">
            <table>
                <tr>
                    <td>用户名：</td>
                    <td><input type="text" name="username"></td>
                </tr>
                <tr>
                    <td>邮件地址：</td>
                    <td><input type="text" name="email"></td>
                </tr>
                <tr>
                    <td><input type="reset" value="重填"></td>
                    <td><input type="button" value="提交" onClick="checkSubmit();" name="btnSubmit"></td>
                </tr>
            </table>
        </form>
    </body>
</html>

index.js

var checkSubmitFlg=true;
function checkSubmit(){
    if(true==checkSubmitFlg){
        document.theForm.btnSubmit.disabled=true;
        document.theForm.submit();
        checkSubmitFlg=false;
    }
}

其中的"theForm"、"btnSubmit"分别对应了form的name与提交按钮的name。这句话的意思是将提交按钮变灰并禁止其使用。

HandlerServlet.java

public class HandlerServlet extends HttpServlet {

    int count=0;
    public void doPost(HttpServletRequest req, HttpServletResponse resp) throws IOException{
        resp.setContentType("text/html;charset=utf-8");
        PrintWriter out=resp.getWriter();
        try {
            Thread.sleep(2000);
        } catch (InterruptedException e) {
            // TODO Auto-generated catch block
            e.printStackTrace();
        }
        System.out.println(count++);
        out.print("成功");
        out.close();
    }
}

在客户端通过JavaScript脚本控制表单的重复提交，也有其不足之处，即当显示成功信息之后，若点击“刷新”按钮，将导致表单的再次提交。此时需要在服务端使用同步令牌来避免。