您的位置：首页 > Web前端 > JavaScript

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

2017-07-02 18:57 387 查看

当用户在表单中单击“提交”按钮进行提交操作时，可能由于服务器端响应的不及时，暂时没有收到提交成功的返回信息而再次点击“提交”按钮，导致同一表单被重复提交。而即使服务器端的响应很及时，也可能造成表单的重复提交，比如当服务器端在处理完用户的请求信息后，通过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脚本控制表单的重复提交，也有其不足之处，即当显示成功信息之后，若点击“刷新”按钮，将导致表单的再次提交。此时需要在服务端使用同步令牌来避免。

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： javascript

相关文章推荐

新的分享

章节导航