背景

假設(shè)我們正在開(kāi)發(fā)一個(gè)應(yīng)用，該應(yīng)用允許用戶上報(bào)突發(fā)事件。用戶需要填寫(xiě)一系列信息并提交表單。為了避免用戶在網(wǎng)絡(luò)延遲或者誤操作的情況下多次點(diǎn)擊提交按鈕，我們需要在代碼中加入防止重復(fù)提交的邏輯。

小白級(jí)別：簡(jiǎn)單粗暴的禁用提交按鈕

一種簡(jiǎn)單的方法是在提交表單時(shí)禁用提交按鈕。這可以在JavaScript中通過(guò)以下代碼實(shí)現(xiàn)：

document.getElementById("submitBtn").disabled = true;

這樣，在用戶點(diǎn)擊提交按鈕后，按鈕就會(huì)變?yōu)椴豢捎脿顟B(tài)，防止用戶再次點(diǎn)擊。但是，這種方法存在一個(gè)問(wèn)題：如果提交失敗，用戶無(wú)法再次點(diǎn)擊提交按鈕，除非刷新頁(yè)面。

進(jìn)階級(jí)別：使用標(biāo)志變量

為了解決上述問(wèn)題，我們可以使用一個(gè)標(biāo)志變量來(lái)跟蹤提交狀態(tài)。當(dāng)用戶提交表單時(shí)，我們將標(biāo)志變量設(shè)置為true，表示正在提交。在提交結(jié)束后，我們將標(biāo)志變量設(shè)置回false。這樣，如果提交失敗，用戶可以再次點(diǎn)擊提交按鈕。示例如下：

var submitting = false; // 定義一個(gè)變量用于跟蹤提交狀態(tài) - Define a variable to track the submission status
 
function onSubmit() {
  if (submitting) {
    alert("請(qǐng)勿重復(fù)提交！");
    return;
  }
 
  submitting = true;
 
  // 提交表單的邏輯...
  
  // 提交結(jié)束后，將提交狀態(tài)設(shè)置回 false
  submitting = false;
}

大神級(jí)別：優(yōu)雅地處理 AJAX 請(qǐng)求

在實(shí)際項(xiàng)目中，我們通常使用 AJAX 進(jìn)行表單提交，以實(shí)現(xiàn)無(wú)刷新更新頁(yè)面。為了更好地處理重復(fù)提交問(wèn)題，我們可以在 AJAX 請(qǐng)求的開(kāi)始和結(jié)束時(shí)更新提交狀態(tài)。這樣，我們可以確保在請(qǐng)求尚未結(jié)束時(shí)，用戶無(wú)法再次點(diǎn)擊提交按鈕。示例代碼如下：

var submitting = false; // 定義一個(gè)變量用于跟蹤提交狀態(tài) - Define a variable to track the submission status
 
function submit() {
  if (submitting) {
    layer.msg("請(qǐng)勿重復(fù)提交！", {icon: 5, time: 2000});
    return false;
  }
 
  submitting = true;
 
  // ... 其他表單驗(yàn)證代碼
 
  var reportPage = top.layer.open({
    // ... 其他屬性配置
    yes: function (data) {
    // ... 其他邏輯代碼
    var result = ajax返回的結(jié)果
    if (result.code == '0') {
        layer.msg("成功", {icon: 6, time: 2000});
    } else {
        layer.msg("失敗", {icon: 5, time: 2000});
    }
    // 請(qǐng)求結(jié)束，將提交狀態(tài)設(shè)置回 false
    submitting = false;
    },
    btn2: function (index, layero) {
        top.layer.close(reportPage); // 關(guān)閉當(dāng)前頁(yè)面
    }
  });
  return false;
}

通過(guò)上述代碼，我們可以確保在 AJAX 請(qǐng)求進(jìn)行中，用戶無(wú)法再次點(diǎn)擊提交按鈕。當(dāng)請(qǐng)求結(jié)束后，不論成功或失敗，我們都將提交狀態(tài)設(shè)置回 `false`，使得用戶可以在需要時(shí)再次點(diǎn)擊提交按鈕。

總結(jié)

從小白級(jí)別到大神級(jí)別，我們學(xué)習(xí)了種防止表單重復(fù)提交的方法。對(duì)于初學(xué)者來(lái)說(shuō)，簡(jiǎn)單禁用提交按鈕可能就足夠了。然而，在實(shí)際項(xiàng)目中，我們通常需要使用更高級(jí)的方法，如標(biāo)志變量和優(yōu)雅地處理 AJAX 請(qǐng)求。最后，希望這篇文章能幫助大家更好地理解如何防止表單重復(fù)提交，提高代碼的穩(wěn)定性和可維護(hù)性。 

到此這篇關(guān)于JavaScript防止表單重復(fù)提交的方法的文章就介紹到這了,更多相關(guān)JS防止表單重復(fù)提交內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評(píng)論