表單提交時(shí)候我們應(yīng)該控制提交按鈕,不能點(diǎn)擊多次進(jìn)行數(shù)據(jù)的重復(fù)提交。要不然就會(huì)有冗余的重復(fù)的數(shù)據(jù)在系統(tǒng)中,造成系統(tǒng)出現(xiàn)數(shù)據(jù)垃圾。jQuery很簡(jiǎn)單的就可以實(shí)現(xiàn)對(duì)表單提交按鈕控制,下面就是相關(guān)的例子和代碼。
<form action="${pageContext.servletContext.contextPath}/XXX/###" method="post" id="messageForm"> 姓名:<input name = "name" type="text" /> <button type="button" id="submit">提交申請(qǐng)</button> </form> <script> $("#submit").click(function(){ $(this).attr("disabled","true"); //設(shè)置變灰按鈕 $("#messageForm").submit();//提交表單 setTimeout("$('#submit').removeAttr('disabled')",3000); //設(shè)置三秒后提交按鈕 顯示 }) </scritp></span> </span>
附:其他的實(shí)現(xiàn)方法,也使用了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="/" > <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>
前后代碼進(jìn)行控制,后臺(tái)代碼也要進(jìn)行控制,這樣子就可以確保萬(wàn)無(wú)一失了!
后臺(tái)代碼控制表單提交有一個(gè)好的辦法就是使用session, 具體可以參考下面這篇博文:
其實(shí)后臺(tái)控制表單重復(fù)提交的原理:
(1)在表單提交頁(yè)面生成一個(gè)唯一的token;token可以保存在session中。(若使用了緩存,也可以保存在緩存中)
(2)提交的時(shí)候驗(yàn)證,后臺(tái)首先驗(yàn)證token,驗(yàn)證通過(guò),才可以進(jìn)行提交操作;
(3)當(dāng)表單數(shù)據(jù)提交成功(保存到數(shù)據(jù)庫(kù)-持久化),然后刪除session(緩存)中對(duì)應(yīng)的token。
更多相關(guān)教程請(qǐng)?jiān)L問(wèn) JavaScript視頻教程
聲明:本網(wǎng)頁(yè)內(nèi)容旨在傳播知識(shí),若有侵權(quán)等問(wèn)題請(qǐng)及時(shí)與本網(wǎng)聯(lián)系,我們將在第一時(shí)間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com