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

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

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

// 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)行為（即刷新頁面）
var formData = new FormData(this); // 獲取表單數(shù)據(jù)
var xhr = new XMLHttpRequest(); // 創(chuàng)建Ajax請求對象
xhr.open("POST", "submit.php", true); // 設(shè)置請求方式、請求地址、是否異步
xhr.onreadystatechange = function() {
if (xhr.readyState === 4 && xhr.status === 200) {
alert("提交成功！");
}
};
xhr.send(formData); // 發(fā)送數(shù)據(jù)
});

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

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

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

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

在多次提交的情況下，我們可能會遇到用戶連續(xù)點(diǎn)擊提交按鈕的問題。當(dāng)用戶連續(xù)點(diǎn)擊多次時，由于異步請求的響應(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)行為（即刷新頁面）
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請求對象
xhr.open("POST", "submit.php", true); // 設(shè)置請求方式、請求地址、是否異步
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)擊提交按鈕后先禁用按鈕，然后在請求成功之后再啟用按鈕。

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

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

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

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