Ajax（Asynchronous JavaScript and XML）是一種無需刷新整個頁面的技術，它可以通過JavaScript在后臺與服務器進行數據交互。在網頁中，我們經常會遇到需要提交表單的場景，傳統的表單提交會導致整個頁面的刷新，給用戶帶來不好的體驗。而使用Ajax技術，我們可以實現無刷新的表單提交，提升用戶體驗。本文將介紹如何使用Ajax和JavaScript來提交表單。

在實現表單提交之前，我們需要首先獲得表單元素，并給按鈕添加一個事件監聽器。例如，我們有一個簡單的登錄表單：

接下來，我們使用JavaScript來獲取表單元素，并添加事件監聽器：

const form = document.getElementById("login-form");
const submitButton = form.querySelector("input[type='submit']");
submitButton.addEventListener("click", function(event) {
event.preventDefault(); // 阻止表單默認的提交行為
const username = form.querySelector("input[name='username']").value;
const password = form.querySelector("input[name='password']").value;
// 使用Ajax提交表單數據
const xhr = new XMLHttpRequest();
xhr.open("POST", form.action, true);
xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
xhr.onreadystatechange = function() {
if (xhr.readyState === 4 && xhr.status === 200) {
// 表單提交成功后的處理邏輯
console.log(xhr.responseText);
}
};
const formData = new FormData(form);
xhr.send(formData);
});

在上述代碼中，我們先通過`getElementById`方法獲取到表單元素，然后通過`querySelector`方法獲取到用戶名和密碼的輸入框。接下來，我們給提交按鈕添加了一個點擊事件的監聽器。當用戶點擊按鈕時，會觸發這個事件。在事件處理函數中，我們首先調用`event.preventDefault()`方法，阻止表單默認的提交行為。然后，我們通過`XMLHttpRequest`對象創建了一個異步請求，使用POST方法提交表單數據。

在發送請求之前，我們設置了請求的頭部信息，并指定了`Content-Type`為`application/x-www-form-urlencoded`，這是表單提交時的常見格式。在`xhr.onreadystatechange`的事件監聽器中，我們對請求的`readyState`和`status`進行了判斷，當請求成功完成（`readyState`為4，`status`為200）時，可以進行成功提交后的處理邏輯。

使用Ajax提交表單時，我們通常使用`FormData`對象來處理表單數據。`FormData`對象可以自動將表單中的數據序列化為可直接發送的格式。在上述代碼中，我們通過`new FormData(form)`創建了一個`FormData`對象，并將其傳遞給了`xhr.send`方法。

通過上述代碼，我們實現了使用Ajax和JavaScript提交表單，使得頁面無需刷新，提升了用戶體驗。