web前端數(shù)據(jù)請(qǐng)求或者表單提交往往通過對(duì)dom的點(diǎn)擊事件來操作，但是往往因?yàn)檎J(rèn)為點(diǎn)擊過快（少年手速挺快的嘛），或者因?yàn)轫憫?yīng)等待使得用戶誤人為沒操作而重復(fù)很多次點(diǎn)擊，造成表單數(shù)據(jù)的連續(xù)重復(fù)提交，造成用戶體檢的不好，甚至影響到整個(gè)系統(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>

實(shí)際上這一種是通過js 進(jìn)行提交?？梢岳斫獬伞?/p>

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

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

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

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

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

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

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

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

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

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

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

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

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

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

是的，當(dāng)點(diǎn)擊過快的時(shí)候還是會(huì)重復(fù)提交，這是因?yàn)?，如果click里沒執(zhí)行submit的時(shí)候html默認(rèn)的type＝submit 的input點(diǎn)擊操作會(huì)提交表單，舉個(gè)完整的例子

<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();
});

這三個(gè)代碼都是一個(gè)效果提交表單，但是?。。。。。。。。?！我們發(fā)現(xiàn)阻止表單提交的不就是在當(dāng)前交互周期（一次點(diǎ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)]有，第二次點(diǎn)擊的時(shí)候就disabeld掉了，所以只有第一次成功，第二次的就不會(huì)提交了！

當(dāng)然，如果是其他dom元素防治重復(fù)點(diǎn)擊那就更簡單了

$("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; 
　　　　　　} 
　 }); 
});

因?yàn)閟ubmit（）會(huì)刷新試圖，而ajax不會(huì)，所以在回調(diào)后需要把判斷重復(fù)的那個(gè)屬性賦值為false

這是不是就更簡單？我想你會(huì)這樣認(rèn)為的！

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

最新評(píng)論