AJAX 是一種用于在不刷新整個(gè)頁面的情況下更新網(wǎng)頁內(nèi)容的技術(shù)。在表單提交中，AJAX 可以使我們以更加流暢的方式處理表單數(shù)據(jù)。本文將介紹如何使用 AJAX 按鈕提交表單，并通過舉例說明這種方法的優(yōu)勢。

通常情況下，我們?cè)?HTML 中使用 form 元素來創(chuàng)建表單。傳統(tǒng)的表單提交方式會(huì)導(dǎo)致整個(gè)頁面刷新以向服務(wù)器發(fā)送表單數(shù)據(jù)，往往造成用戶體驗(yàn)不佳。而使用 AJAX 按鈕提交表單，我們可以在后臺(tái)向服務(wù)器發(fā)送表單數(shù)據(jù)的同時(shí)，不刷新整個(gè)頁面，并直接將服務(wù)器返回的結(jié)果展示給用戶。

假設(shè)我們有一個(gè)包含用戶名和密碼的登錄表單。我們可以使用如下代碼創(chuàng)建一個(gè)登錄表單：

<form id="loginForm" method="post" action="/login">
<label for="username">用戶名:</label>
<input type="text" name="username" id="username"><br>
<label for="password">密碼:</label>
<input type="password" name="password" id="password"><br>
<input type="submit" value="登錄">
</form>

在上面的代碼中，我們使用了一個(gè)提交按鈕，用于將表單數(shù)據(jù)發(fā)送到服務(wù)器。默認(rèn)情況下，表單會(huì)在點(diǎn)擊提交按鈕后刷新整個(gè)頁面并發(fā)送數(shù)據(jù)。但我們可以通過 JavaScript 來阻止這種默認(rèn)行為，并使用 AJAX 技術(shù)來提交表單。

首先，我們需要在 JavaScript 中獲取表單元素，并監(jiān)聽按鈕的點(diǎn)擊事件。以下是一個(gè)基本的實(shí)現(xiàn)示例：

document.getElementById("loginForm").addEventListener("submit", function(event) {
event.preventDefault(); // 阻止表單的默認(rèn)提交行為
// 使用 AJAX 技術(shù)發(fā)送表單數(shù)據(jù)
});

接下來，我們需要使用 AJAX 發(fā)送表單數(shù)據(jù)到后臺(tái)并接收服務(wù)器返回的結(jié)果。可以使用 XMLHttpRequest 或者 jQuery 提供的 AJAX 方法來實(shí)現(xiàn)這一功能。以下是使用原生 JavaScript XMLHttpRequest 的示例：

var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function() {
if (xhr.readyState === XMLHttpRequest.DONE) {
if (xhr.status === 200) {
// 請(qǐng)求成功
var response = xhr.responseText;
// 處理服務(wù)器返回的結(jié)果
} else {
// 請(qǐng)求失敗
}
}
};
xhr.open("POST", "/login", true);
xhr.send(new FormData(document.getElementById("loginForm")));

在上面的代碼中，我們創(chuàng)建了一個(gè) XMLHttpRequest 對(duì)象，并設(shè)置了一個(gè)回調(diào)函數(shù)。當(dāng)請(qǐng)求的狀態(tài)改變時(shí)，回調(diào)函數(shù)會(huì)被觸發(fā)。在回調(diào)函數(shù)內(nèi)部，我們可以根據(jù)請(qǐng)求的狀態(tài)和服務(wù)器返回的狀態(tài)碼來判斷請(qǐng)求是否成功，以及如何處理服務(wù)器返回的結(jié)果。

使用 AJAX 按鈕提交表單的好處是，用戶在提交表單后，不會(huì)刷新整個(gè)頁面，并能夠在后臺(tái)處理表單數(shù)據(jù)的同時(shí)，獲得即時(shí)的反饋。用戶體驗(yàn)更加流暢，頁面響應(yīng)更迅速。

總結(jié)來說，使用 AJAX 按鈕提交表單可以提升用戶體驗(yàn)，使頁面在不刷新的情況下實(shí)現(xiàn)流暢的表單提交和結(jié)果展示。這種方法可以通過監(jiān)聽按鈕的點(diǎn)擊事件，阻止表單的默認(rèn)提交行為，并使用 AJAX 技術(shù)來發(fā)送和接收表單數(shù)據(jù)。通過這種方法，用戶不需要等待整個(gè)頁面刷新，而是能夠立即獲得服務(wù)器返回的結(jié)果，并進(jìn)行相應(yīng)的操作。