快捷導航

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

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

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

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

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

<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 進行提交。可以理解成　

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

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

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

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

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

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

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

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

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

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

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

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

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

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

是的，當點擊過快的時候還是會重復(fù)提交，這是因為，如果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();
});

這三個代碼都是一個效果提交表單，但是?。。。。。。。。。∥覀儼l(fā)現(xiàn)阻止表單提交的不就是在當前交互周期（一次點擊－》響應(yīng)－》回調(diào)）里，將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元素防治重復(fù)點擊那就更簡單了

$("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不會，所以在回調(diào)后需要把判斷重復(fù)的那個屬性賦值為false

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

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

您可能感興趣的文章: