表单重复提交怎么办？可以看看此文(js验证账户名是否重复的方法)
表单重复提交怎么办？可以看看此文
场景模拟
创建一个from.jsp页面
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Form表单</title>
</head>
<body>
<form action="${pageContext.request.contextPath}/DoFormServlet" method="post">
用户名：<input type="text" name="userName">
<input type="submit" value="提交" id="submit">
</form>
</body>
</html>
DoFormServlet 代码
@WebServlet("/DoFormServlet")
public class DoFormServlet extends HttpServlet {
@Override
protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
req.setCharacterEncoding("UTF-8");
String userName = req.getParameter("userName");
try {
Thread.sleep(300);
} catch (Exception e) {
// TODO: handle exception
}
System.out.println("往数据库插入数据...."+userName);
resp.getWriter().write("success");
}
}
什么情况下会出现表单重复提交呢？
1、网络延迟
在平时开发中，如果网速比较慢的情况下，用户提交表单后，发现服务器半天都没有响应，那么用户可能会以为是自己没有提交表单，就会再点击提交按钮重复提交表单，我们在开发中必须防止表单重复提交。
2、重复刷新
表单提交后用户点击【刷新】按钮导致表单重复提交
3、点击浏览器的【后退】按钮回退到 表单页面后进行再次提交
用户提交表单后，点击浏览器的【后退】按钮回退到表单页面后进行再次提交
那么怎么解决呢？
1、使用JavaScript 解决
既然存在上述所说的表单重复提交问题，那么我们就要想办法解决，比较常用的方法是采用JavaScript来防止表单重复提交，具体做法如下：
修改form.jsp页面，添加如下的JavaScript代码来防止表单重复提交
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Form表单</title>
<script type="text/javascript">
var isFlag = false; //表单是否已经提交标识，默认为false
function submitFlag() {
if (isFlag == false) {
isFlag = true;
return true;
} else {
return false;
}
}
</script>
</head>
<body>
<form action="${pageContext.request.contextPath}/DoFormServlet"
method="post" onsubmit="return submitFlag()">
用户名：<input type="text" name="userName"> <input type="submit"
value="提交" id="submit">
</form>
</body>
</html>
除了用这种方式之外，经常见的另一种方式就是表单提交之后，将提交按钮设置为不可用，让用户没有机会点击第二次提交按钮，代码如下：
function dosubmit(){
//获取表单提交按钮
var btnSubmit = document.getElementById("submit");
//将表单提交按钮设置为不可用，这样就可以避免用户再次点击提交按钮
btnSubmit.disabled= "disabled";
//返回true让表单可以正常提交
return true;
}
- 使用后端提交解决
对于【场景二】和【场景三】导致表单重复提交的问题，既然客户端无法解决，那么就在服务器端解决，在服务器端解决就需要用到session了。
具体的做法：在服务器端生成一个唯一的随机标识号，专业术语称为Token(令牌)，同时在当前用户的Session域中保存这个Token。然后将Token发送到客户端的Form表单中，在Form表单中使用隐藏域来存储这个Token，表单提交的时候连同这个Token一起提交到服务器端，然后在服务器端判断客户端提交上来的Token与服务器端生成的Token是否一致，如果不一致，那就是重复提交了，此时服务器端就可以不处理重复提交的表单。如果相同则处理表单提交，处理完后清除当前用户的Session域中存储的标识号。
在下列情况下，服务器程序将拒绝处理用户提交的表单请求：
1. 存储Session域中的Token(令牌)与表单提交的Token(令牌)不同。
2. 当前用户的Session中不存在Token(令牌)。
3. 用户提交的表单数据中没有Token(令牌)。
@WebServlet("/ForwardServlet")
public class ForwardServlet extends HttpServlet {
@Override
protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
req.getSession().setAttribute("sesionToken", TokenUtils.getToken());
req.getRequestDispatcher("form.jsp").forward(req, resp);
}
}
转发页面
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Form表单</title>
</head>
<body>
<form action="${pageContext.request.contextPath}/DoFormServlet"
method="post" onsubmit="return dosubmit()">
<input type="hidden" name="token" value="${sesionToken}"> 用户名：<input type="text"
name="userName"> <input type="submit" value="提交" id="submit">
</form>
</body>
</html>
后端Java
@WebServlet("/DoFormServlet")
public class DoFormServlet extends HttpServlet {
@Override
protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
req.setCharacterEncoding("UTF-8");
boolean flag = isFlag(req);
if (!flag) {
resp.getWriter().write("已经提交...");
System.out.println("数据已经提交了..");
return;
}
String userName = req.getParameter("userName");
try {
Thread.sleep(300);
} catch (Exception e) {
// TODO: handle exception
}
System.out.println("往数据库插入数据...." + userName);
resp.getWriter().write("success");
}
public boolean isFlag(HttpServletRequest request) {
HttpSession session = request.getSession();
String sesionToken = (String) session.getAttribute("sesionToken");
String token = request.getParameter("token");
if (!(token.equals(sesionToken))) {
return false;
}
session.removeAttribute("sesionToken");
return true;
}
}
js验证账户名是否重复的方法
这篇文章主要为大家详细介绍了js验证账户名是否重复，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
基于jquuery.validata.js的验证用户名不重复，供大家参考，具体内容如下
页面js
| <table class=\"tb_input\" > <tbody> <tr> <th >名称<strong class=\"red\">*</strong></th> <td> <input type=\"text\" name=\"sysRight.name\" id=\"sysRight.name\" value=\"<#if sysRight.name??>${sysRight.name!}</#if>\"> <p>名称不能为空且不能超过80个字符</p> </td> </tr> </tbody> </table> $(function(){ $(\"#tb_input\").validate({ rules:{ \"sysRight.name\":{ required : true, maxlength : 80, remote:{ url:\"${webroot}/sysRight!checkNameRepeat.action\", //后台处理程序 type:\"post\", //数据发送方式 data: { \"sysRight.name\":$(\"#sysRight.name\").val(), } } }, }, messages:{ \"sysRight.name\":{ remote: jQuery.format(\"名称已存在\") }, } }); |
服务器端代码
| /**
* 用于页面调用jQuery提交方法的回调处理，此回调正常用法，一个参数 * @param msg * @throws Exception */ protected void writeResponse(String msg){ if(msg==null) msg=\"\"; ServletActionContext.getResponse().setContentType(\"html/text;charset=utf-8\"); ServletActionContext.getResponse().setCharacterEncoding(\"UTF-8\"); try { PrintWriter pw = ServletActionContext.getResponse().getWriter(); pw.write(msg); pw.flush(); pw.close(); } catch (IOException e) { e.printStackTrace(); } } /** * 检查帐号是否存在 * @auther yangj * @date 2014年6月16日 上午11:45:39 */ public void checkNameRepeat(){ try { boolean flag = sysUserService.checkNameRepeat(sysUser); String sFlag; if(flag) { sFlag = \"true\"; }else { sFlag = \"false\"; } writeResponse(sFlag); } catch (Exception e) { e.printStackTrace(); writeResponse(\"0\"); } } |
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。
1. 带 [亲测] 说明源码已经被站长亲测过!
2. 下载后的源码请在24小时内删除,仅供学习用途！
3. 分享目的仅供大家学习和交流，请不要用于商业用途！
4. 本站资源售价只是赞助，收取费用仅维持本站的日常运营所需！
5. 本站所有资源来源于站长上传和网络，如有侵权请邮件联系站长！
6. 没带 [亲测] 代表站长时间紧促,站长会保持每天更新 [亲测] 源码 !
7. 盗版ripro用户购买ripro美化无担保,若设置不成功/不生效我们不支持退款!
8. 本站提供的源码、模板、插件等等其他资源，都不包含技术服务请大家谅解！
9. 如果你也有好源码或者教程，可以到审核区发布，分享有金币奖励和额外收入!
10.如果您购买了某个产品，而我们还没来得及更新，请联系站长或留言催更，谢谢理解 !
GG资源网 » 表单重复提交怎么办？可以看看此文(js验证账户名是否重复的方法)
