完美通行證表單重復提交是啥意思？

表單重復提交是重復多次的提交同一表單的意思。

在平時開發中，如果網速比較慢的情況下，或者遠程有延遲，用戶提交表單后，發現服務器半天都沒有響應，那么用戶可能會以為是自己沒有提交表單，就會再點擊提交按鈕重復提交表單，這樣會出現表單的重復提交，造成向服務器發送兩次請求，所以我們在開發中必須防止表單。

表單重復提交的情況：

1、第一次單擊提交之后，在沒有提交成功情況下，又單擊提交按鈕。

2、提交完表單之后，刷新網頁。

3、用戶提交表單后，點擊瀏覽器的【后退】按鈕回退到表單頁面后進行再次提交。

表單重復提交問題的三種解決思路

第一：如果是點擊submit類型的按鈕提交表單，就要先看是否是表單的默認提交事件，如果是，禁用默認提交事件（event.preventDefault();）或者改用button類型按鈕提交

$('#submit').click(function(e){

e.preventDefault()

})

第二： 如果是點擊按鈕ajax提交，就要在提交之后禁用掉按鈕，以免重復提交，這個在平時各種情況下的表單提交都考慮進去

禁用按鈕，加disabled屬性，或者加pointer-event:none屬性，或者用一個count來計數，只有在點擊一次的時候才提交表單

通常在提交成功之后會刷新或跳轉頁面，失敗則不會，要注意一下，如果提交失敗，把禁用的按鈕解除禁用

let count = 0;

$('#submit').click(function(){

count++;

if (page.clicktime == 1) {

setTimeout(()=>{

$.ajax({

success:res=>{

if(!res.success){

count = 0 // 提交按鈕解除禁用

}

},

error:err=>{

count = 0 // 提交按鈕解除禁用

}

})

})

}

// $(this).attr('disabled,true) // 禁用按鈕or

// $(this).css('pointer-event','none') // 來禁用點擊事件

})

第三： 如果是點擊選項提交，那么就要考慮label和input的關聯問題了，點擊label， 事件冒泡，input也會觸發一次提交

可以這樣來處理

$('label').click(function(e) {

if($(e.target).is('input')){ // 點擊label的時候，如果事件源是input,那么就把它禁用掉

return;

}

});

最后，其他的點擊事件也可以這樣處理, 避免多次觸發事件