WEB 前端開發(fā)中防治重復提交的實現(xiàn)方法

更新時間：2016年10月26日 09:58:53 作者：loocer

這篇文章主要介紹了JS WEB 前端開發(fā)中防治重復提交的實現(xiàn)方法,涉及到表單提交的幾種方式介紹，非常不錯具有參考借鑒價值，需要的朋友可以參考下

web前端數(shù)據(jù)請求或者表單提交往往通過對dom的點擊事件來操作，但是往往因為認為點擊過快（少年手速挺快的嘛），或者因為響應等待使得用戶誤人為沒操作而重復很多次點擊，造成表單數(shù)據(jù)的連續(xù)重復提交，造成用戶體檢的不好，甚至影響到整個系統(tǒng)的安全性。而前端的防治重復提交至少很有效的防治了人為正常操作下的很多不必要麻煩。下面就來講講如何有效避免前端的表單重復提交

表單提交有以下幾種方式：

<form name=”form” method=”post” action=”#"> 
<input type=”submit” name=”submit” value=”提交"> 
</form>

另外，還有一種常用的方法是使用圖片：

代碼如下:

<form name=”form” method=”post” action=”# "> 
<input type=”image” name=”submit” src=”btnSubmit.jpg”> 
</form>

第三種是使用鏈接來提交表單，用到了javascript的DOM模型：

代碼如下:

<form name=”form” method=”post” action=”#”> 
<a href=”javascript:form.submit();”>提交</a> 
</form>

實際上這一種是通過js 進行提交?？梢岳斫獬伞?/p>

$("form").find("a").click(function(){
$("form").submit();
　　});

第一種和第二種可以用js來：

$("input[type='submit']").click(function(){
　　　　$("form").submit();
　　});
$("input[name='submit']").click(function(){
　　　　$("form").submit();
　　});

總之，都是對form進行提交,當然還有出了表單提交還有些請求也要防治重復，比如響應某個事件的ajax請求（提交數(shù)據(jù)）

$.ajax({
url: url,
type: "post",
data: data,
success: function (data) {
callback;
}
});

那么前面這些提交和請求在網(wǎng)絡和性能因素上導致不能及時網(wǎng)絡響應并且在事件多次響應時造成的重復，除非在提交響應完成前的點擊（觸發(fā)事件）視為無效，等當前響應完了再去響應下一個請求

如果是表單按鈕我們可以這樣在點擊后將按鈕disabled掉

$("input[type='submit']").click(function(){
$(this).attr("disabled",　true);
　$("form").submit();
});

按道理來說，將點擊后將按鈕disabled設為true時按鈕就不能點擊了那么第二次以后點擊就無效了，但這樣做你會發(fā)現(xiàn)同時第一次點擊的表單也無法正常提交了（好像是h5的標準后才不行的，無論怎樣h5標準的瀏覽器我試了試都不行），看來是disabled影響了表單的提交，那么先提交后disabled看行不行

$("input[type='submit']").click(function(){
　$("form").submit();
$(this).attr("disabled",　true);
});

實驗結果，這樣也不行，我們不能猜想submit（）回調在click函數(shù)最后執(zhí)行并且.submit()函數(shù)內部應該對disabel做了判斷（假設這是瀏覽器內部機制原理），反正在當前這個交互周期里disabled了就不能submit

那么我們可以拋開disabled用代碼邏輯來防治重復

$("input[type='submit']").click(function(){
if(!$(this)[0].repeat){
$(this)[0].repeat=true;
$（"form").submit();
}
});

在當前點擊的按鈕如果沒有repeat的話就進入提交并且設置個值為true的repeat屬性，當?shù)诙芜M來的時候發(fā)現(xiàn)有這個屬性就不提交，看似這樣的邏輯會防治重復提交了，但是事實永遠都是殘酷的！

是的，當點擊過快的時候還是會重復提交，這是因為，如果click里沒執(zhí)行submit的時候html默認的type＝submit 的input點擊操作會提交表單，舉個完整的例子

<form name=”form” method=”post” action=”#"> 
<input type=”submit” name=”submit” value=”提交"> 
</form>
<form name=”form” method=”post” action=”#"> 
<input type=”submit” name=”submit” value=”提交"> 
</form>
$("input[type='submit']").click(function(){
console.log("here is click too!");
});
<form name=”form” method=”post” action=”#"> 
<div>提交</div> 
</form>
$("form").find("div").click(function(){
　　$("form").submit();
});

這三個代碼都是一個效果提交表單，但是?。。。。。。。。?！我們發(fā)現(xiàn)阻止表單提交的不就是在當前交互周期（一次點擊－》響應－》回調）里，將submit按鈕disabled掉嗎，好的，少年上代碼

$("form").find("div").click(function(){
if(!$(this)[0].repeat){ 
　　 $(this)[0].repeat=true;
　　$(this).closest("form").submit();
}else{
　　 $(this).attr("disabled",　true); }
});

看到?jīng)]有，第二次點擊的時候就disabeld掉了，所以只有第一次成功，第二次的就不會提交了！

當然，如果是其他dom元素防治重復點擊那就更簡單了

$("div").click(function(){
　　if(!!$(this)[0].isRepeat){
　　　　return;
　　}
$(this)[0].isRepeat=1;
　　 　$.ajax({
url: url,
type: "post",
data: data,
success: function (data) {
　　　　　　　　$(this)[0].isRepeat＝0；
　　　　　　　　callback; 
　　　　　　} 
　 }); 
});

因為submit（）會刷新試圖，而ajax不會，所以在回調后需要把判斷重復的那個屬性賦值為false

這是不是就更簡單？我想你會這樣認為的！

以上所述是小編給大家介紹的JS WEB 前端開發(fā)中防治重復提交的實現(xiàn)方法，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持！

您可能感興趣的文章: