Jquery實現表單提交按鈕變灰，防止多次點擊提交重復數據

來源：懂視網責編：小采時間：2020-11-27 20:36:04

Jquery實現表單提交按鈕變灰，防止多次點擊提交重復數據

Jquery實現表單提交按鈕變灰，防止多次點擊提交重復數據:表單提交時候我們應該控制提交按鈕，不能點擊多次進行數據的重復提交。要不然就會有冗余的重復的數據在系統中，造成系統出現數據垃圾。jQuery很簡單的就可以實現對表單提交按鈕控制，下面就是相關的例子和代碼。<form action="${pageCon

推薦度：

點擊下載本文 文檔為doc格式

導讀Jquery實現表單提交按鈕變灰，防止多次點擊提交重復數據:表單提交時候我們應該控制提交按鈕，不能點擊多次進行數據的重復提交。要不然就會有冗余的重復的數據在系統中，造成系統出現數據垃圾。jQuery很簡單的就可以實現對表單提交按鈕控制，下面就是相關的例子和代碼。<form action="${pageCon

表單提交時候我們應該控制提交按鈕，不能點擊多次進行數據的重復提交。要不然就會有冗余的重復的數據在系統中，造成系統出現數據垃圾。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>

附：其他的實現方法，也使用了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>

前后代碼進行控制，后臺代碼也要進行控制，這樣子就可以確保萬無一失了！

后臺代碼控制表單提交有一個好的辦法就是使用session，具體可以參考下面這篇博文：

其實后臺控制表單重復提交的原理：

（1）在表單提交頁面生成一個唯一的token；token可以保存在session中。（若使用了緩存，也可以保存在緩存中）

（2）提交的時候驗證，后臺首先驗證token，驗證通過，才可以進行提交操作；

（3）當表單數據提交成功（保存到數據庫-持久化），然后刪除session（緩存）中對應的token。

更多相關教程請訪問 JavaScript視頻教程

聲明：本網頁內容旨在傳播知識，若有侵權等問題請及時與本網聯系，我們將在第一時間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com