表单提交时候我们应该控制提交按钮, 不能点击多次进行数据的重复提交. 要不然就会有冗余的重复的数据在系统中, 造成系统出现数据垃圾. jQuery 很简单的就可以实现对表单提交按钮控制, 下面就是相关的例子和代码.
- [html] view plain copy print?
- <form action="${pageContext.servletContext.contextPath}/XXX/###" method="post" id="messageForm">
- 姓名:<input name = "name" type="text" />
- <button type="button" id="submit">提交申请</button>
- </form>
- <script>
- $("#submit").click(function(){
- $(this).attr("disabled","true"); // 设置变灰按钮
- $("#messageForm").submit();// 提交表单
- setTimeout("$('#submit').removeAttr('disabled')",3000); // 设置三秒后提交按钮 显示
- })
- </scritp></span>
- </span>
附: 其他的实现方法, 也使用了 js
第一种:
- [html] view plain copy print?
- <form name=fm method="POST" action="/">
- <p > 按钮变灰</p>
- name: <input type="text" name="name"/>
- <input type="button" value="提交" onclick="javascript:{this.disabled=true;document.fm.submit();}">
- </form>
第二种:
- [html] view plain copy print?
- <form name=fm method="POST" action="/" >
- <input type="submit" name="Submit" value="提交" id="submitId" onclick="submit();">
- </form>
- <script language="javascript">
- function submit()
- {
- var submitId=document.getElementById('submitId');
- submitId.disabled=true;
- document.fm.submit();
- setTimeout("submitId.disabled=false;",3000); // 代码核心在这里, 3 秒还原按钮代码
- }
- </script>
前后代码进行控制, 后台代码也要进行控制, 这样子就可以确保万无一失了!
后台代码控制表单提交有一个好的办法就是使用 session, 具体可以参考下面这篇博文:
Javaweb 学习总结(十三)-- 使用 Session 防止表单重复提交 http://www.cnblogs.com/xdp-gacl/p/3859416.html
http://www.cnblogs.com/xdp-gacl/p/3859416.html
其实后台控制表单重复提交的原理:
(1)在表单提交页面生成一个唯一的 token;token 可以保存在 session 中.(若使用了缓存, 也可以保存在缓存中)
(2)提交的时候验证, 后台首先验证 token, 验证通过, 才可以进行提交操作;
(3)当表单数据提交成功 (保存到数据库 - 持久化), 然后删除 session(缓存) 中对应的 token.
在页面中添加 Token 防止越权访问 http://blog.csdn.net/chinawszjr/article/details/51096095 - 也可做表单重复提交, 使用的原理也是 Token!
http://blog.csdn.net/chinawszjr/article/details/51096095
来源: http://www.bubuko.com/infodetail-2630701.html