本文將介紹Ajax異步提交及多次提交的情況。Ajax是一種技術(shù)，可以在不刷新頁(yè)面的情況下與服務(wù)器進(jìn)行交互。而異步提交指的是數(shù)據(jù)的提交過(guò)程是在后臺(tái)進(jìn)行的，用戶可以在提交過(guò)程中繼續(xù)進(jìn)行其他操作。

在實(shí)際應(yīng)用中，我們常常遇到需要用戶通過(guò)表單提交數(shù)據(jù)到服務(wù)器的情況。如果使用傳統(tǒng)的表單提交方式，每次提交數(shù)據(jù)后頁(yè)面都會(huì)刷新，用戶體驗(yàn)較差。而通過(guò)Ajax異步提交，可以在后臺(tái)進(jìn)行數(shù)據(jù)處理的同時(shí)，不影響用戶的操作。

假設(shè)我們有一個(gè)留言板的頁(yè)面，用戶可以填寫(xiě)姓名和內(nèi)容，然后點(diǎn)擊提交按鈕將留言信息提交到服務(wù)器。傳統(tǒng)的表單提交方式會(huì)造成頁(yè)面刷新，用戶體驗(yàn)較差。而通過(guò)Ajax異步提交，可以在不刷新頁(yè)面的情況下提交留言信息。

// HTML代碼
<form id="messageForm">
<label for="name">姓名：</label>
<input type="text" id="name" name="name" required><br>
<label for="content">內(nèi)容：</label>
<textarea id="content" name="content" required></textarea><br>
<button type="submit" id="submitBtn">提交</button>
</form>
// JavaScript代碼
document.getElementById("messageForm").addEventListener("submit", function(event) {
event.preventDefault(); // 阻止表單的默認(rèn)行為（即刷新頁(yè)面）
var formData = new FormData(this); // 獲取表單數(shù)據(jù)
var xhr = new XMLHttpRequest(); // 創(chuàng)建Ajax請(qǐng)求對(duì)象
xhr.open("POST", "submit.php", true); // 設(shè)置請(qǐng)求方式、請(qǐng)求地址、是否異步
xhr.onreadystatechange = function() {
if (xhr.readyState === 4 && xhr.status === 200) {
alert("提交成功！");
}
};
xhr.send(formData); // 發(fā)送數(shù)據(jù)
});

上述代碼中，通過(guò)addEventListener方法給表單的submit事件添加了一個(gè)監(jiān)聽(tīng)器。當(dāng)用戶點(diǎn)擊提交按鈕后，會(huì)執(zhí)行監(jiān)聽(tīng)器內(nèi)的代碼。

在代碼中，首先使用event.preventDefault()方法阻止表單的默認(rèn)行為，即刷新頁(yè)面。然后，使用FormData對(duì)象獲取表單中的數(shù)據(jù)。

接下來(lái)，創(chuàng)建一個(gè)XMLHttpRequest對(duì)象，用于發(fā)送Ajax請(qǐng)求。使用open方法設(shè)置請(qǐng)求方式為POST，請(qǐng)求地址為"submit.php"，同時(shí)設(shè)置異步為true。并通過(guò)onreadystatechange事件監(jiān)聽(tīng)請(qǐng)求狀態(tài)的變化。

當(dāng)請(qǐng)求狀態(tài)為4（即請(qǐng)求完成）且狀態(tài)碼為200時(shí)，表示請(qǐng)求成功。此時(shí)，可以根據(jù)需要執(zhí)行一些操作，如彈窗提示提交成功。

在多次提交的情況下，我們可能會(huì)遇到用戶連續(xù)點(diǎn)擊提交按鈕的問(wèn)題。當(dāng)用戶連續(xù)點(diǎn)擊多次時(shí)，由于異步請(qǐng)求的響應(yīng)速度較快，可能導(dǎo)致多次提交留言信息。

// HTML代碼
<form id="messageForm">
<label for="name">姓名：</label>
<input type="text" id="name" name="name" required><br>
<label for="content">內(nèi)容：</label>
<textarea id="content" name="content" required></textarea><br>
<button type="submit" id="submitBtn" disabled>提交</button>
</form>
// JavaScript代碼
var submitBtn = document.getElementById("submitBtn");
var isSubmitting = false;
document.getElementById("messageForm").addEventListener("submit", function(event) {
event.preventDefault(); // 阻止表單的默認(rèn)行為（即刷新頁(yè)面）
if (isSubmitting) {
return; // 如果正在提交，則不執(zhí)行后續(xù)代碼
}
isSubmitting = true; // 設(shè)置正在提交的標(biāo)志
submitBtn.disabled = true; // 禁用提交按鈕
var formData = new FormData(this); // 獲取表單數(shù)據(jù)
var xhr = new XMLHttpRequest(); // 創(chuàng)建Ajax請(qǐng)求對(duì)象
xhr.open("POST", "submit.php", true); // 設(shè)置請(qǐng)求方式、請(qǐng)求地址、是否異步
xhr.onreadystatechange = function() {
if (xhr.readyState === 4 && xhr.status === 200) {
alert("提交成功！");
isSubmitting = false; // 重置正在提交的標(biāo)志
submitBtn.disabled = false; // 啟用提交按鈕
}
};
xhr.send(formData); // 發(fā)送數(shù)據(jù)
});

為了避免多次提交的情況發(fā)生，可以在點(diǎn)擊提交按鈕后先禁用按鈕，然后在請(qǐng)求成功之后再啟用按鈕。

通過(guò)在JavaScript代碼中添加兩行代碼，可以實(shí)現(xiàn)禁用和啟用提交按鈕的功能。首先，定義一個(gè)布爾變量isSubmitting，默認(rèn)為false，表示沒(méi)有正在提交的請(qǐng)求。在點(diǎn)擊提交按鈕時(shí)，首先判斷isSubmitting的值，如果是true，則直接返回，不執(zhí)行后續(xù)代碼。

接著，設(shè)置isSubmitting為true，表示正在提交的標(biāo)志。然后使用submitBtn.disabled = true禁用提交按鈕，避免用戶重復(fù)點(diǎn)擊。

當(dāng)請(qǐng)求成功后，再將isSubmitting重置為false，表示沒(méi)有正在提交的請(qǐng)求，同時(shí)啟用提交按鈕。

通過(guò)上述方式，可以有效地解決多次提交的問(wèn)題，提升用戶體驗(yàn)。