表单提交时候我们应该控制提交按钮,不能点击多次进行数据的重复提交。要不然就会有冗余的重复的数据在系统中,造成系统出现数据垃圾。jQuery很简单的就可以实现对表单提交按钮控制,下面就是相关的例子和代码。

 



    1. <form action="${pageContext.servletContext.contextPath}/XXX/###" method="post" id="messageForm">  
    2. <input name = "name" type="text" />  
    3. <button type="button" id="submit">提交申请</button>  
    4. </form>  
    5. <script>  
    6. $("#submit").click(function(){  
    7.   
    8.     $(this).attr("disabled","true"); //设置变灰按钮  
    9.     $("#messageForm").submit();//提交表单  
    10.     setTimeout("$('#submit').removeAttr('disabled')",3000); //设置三秒后提交按钮 显示  
    11.        
    12. })  
    13. </scritp></span>  
    14.   
    15. </span>




    附:其他的实现方法,也使用了js

      第一种:




    1. <form name=fm method="POST" action="/">  
    2. <p>按钮变灰</p>  
    3. <input type="text" name="name"/>  
    4. <input type="button" value="提交" οnclick="javascript:{this.disabled=true;document.fm.submit();}">  
    5.   
    6. </form>



     第二种:


     

     


    1. <form name=fm method="POST" action="/" >  
    2. <input type="submit" name="Submit" value="提交" id="submitId" οnclick="submit();">  
    3. </form>  
    4. <script language="javascript">  
    5.  function submit()  
    6.  {  
    7. submitId=document.getElementById('submitId');  
    8. submitId.disabled=true;  
    9.  document.fm.submit();  
    10. submitId.disabled=false;",3000); //代码核心在这里,3秒还原按钮代码  
    11. }  
    12. </script>



    前后代码进行控制,后台代码也要进行控制,这样子就可以确保万无一失了!

    后台代码控制表单提交有一个好的办法就是使用session, 具体可以参考下面这篇博文:

     

    JavaWeb学习总结(十三)——使用Session防止表单重复提交



     

     

    其实后台控制表单重复提交的原理:

    (1)在表单提交页面生成一个唯一的token;token可以保存在session中。(若使用了缓存,也可以保存在缓存中)

    (2)提交的时候验证,后台首先验证token,验证通过,才可以进行提交操作;

    (3)当表单数据提交成功(保存到数据库-持久化),然后删除session(缓存)中对应的token。

     

     

     

    在页面中添加Token防止越权访问-也可做表单重复提交,使用的原理也是Token!