表单提交时候我们应该控制提交按钮，不能点击多次进行数据的重复提交。要不然就会有冗余的重复的数据在系统中，造成系统出现数据垃圾。jQuery很简单的就可以实现对表单提交按钮控制，下面就是相关的例子和代码。
- <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>
<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
第一种：
- <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>
<form name=fm method="POST" action="/">
<p>按钮变灰</p>
name: <input type="text" name="name"/>
<input type="button" value="提交" οnclick="javascript:{this.disabled=true;document.fm.submit();}">
</form>第二种：
- <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>
<form name=fm method="POST" action="/" >
<input type="submit" name="Submit" value="提交" id="submitId" οnclick="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
其实后台控制表单重复提交的原理：
（1）在表单提交页面生成一个唯一的token；token可以保存在session中。（若使用了缓存，也可以保存在缓存中）
（2）提交的时候验证，后台首先验证token，验证通过，才可以进行提交操作；
（3）当表单数据提交成功（保存到数据库-持久化），然后删除session（缓存）中对应的token。
在页面中添加Token防止越权访问-也可做表单重复提交，使用的原理也是Token!
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 举报，一经查实，本站将立刻删除。
发布者：全栈程序员-用户IM，转载请注明出处：https://javaforall.cn/101627.html原文链接：https://javaforall.cn
【正版授权，激活自己账号】： Jetbrains全家桶Ide使用，1年售后保障，每天仅需1毛
【官方授权 正版激活】： 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...
