Ajax是一種在Web應用中使用的技術，可以通過異步的方式發送和接收數據，無需刷新整個頁面。在表單提交方面，Ajax可以幫助我們獲取提交的表單數據類型，從而進行后續的處理。通過使用Ajax，我們可以在用戶提交表單之后，無需刷新整個頁面，將表單數據發送到服務器進行處理，并獲取到服務器返回的處理結果。本文將介紹如何使用Ajax獲取提交的form表單數據類型，并通過舉例來說明其應用和優勢。

Ajax獲取提交的表單數據的基本步驟

首先，我們需要創建一個表單，并在表單的提交按鈕上綁定一個事件監聽器，當用戶點擊提交按鈕時，觸發監聽器中的代碼。

<form id="myForm">
<input type="text" name="username">
<input type="password" name="password">
<button type="submit" id="submitBtn">提交</button>
</form>
<script>
document.getElementById("submitBtn").addEventListener("click", function(event) {
event.preventDefault(); // 阻止表單默認的提交行為
// 在這里編寫Ajax代碼來獲取表單數據和發送到服務器
});
</script>

在事件監聽器中，我們使用了event.preventDefault()方法來阻止表單的默認提交行為，以便我們可以自己處理表單的數據。

接下來，我們可以使用JavaScript來獲取表單的數據。使用getElementById方法可以獲取到表單的元素，然后可以使用value屬性來獲取輸入框中的值。

document.getElementById("submitBtn").addEventListener("click", function(event) {
event.preventDefault();
var username = document.getElementsByName("username")[0].value;
var password = document.getElementsByName("password")[0].value;
// 在這里編寫Ajax代碼來獲取表單數據和發送到服務器
});

在上面的代碼中，我們通過getElementsByName方法獲取到name為"username"和"password"的輸入框元素，并獲取它們的value值。

下一步是使用Ajax發送表單數據到服務器。可以使用XMLHttpRequest對象或者使用jQuery的$.ajax方法來發送Ajax請求。

document.getElementById("submitBtn").addEventListener("click", function(event) {
event.preventDefault();
var username = document.getElementsByName("username")[0].value;
var password = document.getElementsByName("password")[0].value;
// 使用Ajax發送表單數據到服務器
var xhr = new XMLHttpRequest();
xhr.open("POST", "example.php", true);
xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
xhr.onreadystatechange = function() {
if (xhr.readyState === 4 && xhr.status === 200) {
// 在這里處理服務器返回的結果
}
};
xhr.send("username=" + encodeURIComponent(username) + "&password=" + encodeURIComponent(password));
});

在上面的代碼中，我們使用了XMLHttpRequest對象來發送Ajax請求。通過調用xhr.open方法指定請求方式、URL和是否異步。然后通過xhr.setRequestHeader方法設置請求頭，確保服務器能夠正確解析表單數據。最后，使用xhr.send方法發送表單數據。

最后，我們可以在onreadystatechange回調函數中處理服務器返回的結果。

document.getElementById("submitBtn").addEventListener("click", function(event) {
event.preventDefault();
var username = document.getElementsByName("username")[0].value;
var password = document.getElementsByName("password")[0].value;
var xhr = new XMLHttpRequest();
xhr.open("POST", "example.php", true);
xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
xhr.onreadystatechange = function() {
if (xhr.readyState === 4 && xhr.status === 200) {
// 處理服務器返回的結果
console.log(xhr.responseText);
}
};
xhr.send("username=" + encodeURIComponent(username) + "&password=" + encodeURIComponent(password));
});

在上面的代碼中，我們使用了console.log方法將服務器返回的結果打印到控制臺上。

舉例說明

現在假設我們有一個登錄頁面，用戶需要輸入用戶名和密碼，點擊提交按鈕后，通過Ajax將表單數據發送到服務器進行驗證。服務器返回驗證結果，如果登錄成功，我們就顯示一條成功消息；如果登錄失敗，我們就顯示一個錯誤消息。

<form id="loginForm">
<input type="text" name="username" placeholder="用戶名">
<input type="password" name="password" placeholder="密碼">
<button type="submit" id="submitBtn">登錄</button>
</form>
<script>
document.getElementById("submitBtn").addEventListener("click", function(event) {
event.preventDefault();
var username = document.getElementsByName("username")[0].value;
var password = document.getElementsByName("password")[0].value;
var xhr = new XMLHttpRequest();
xhr.open("POST", "login.php", true);
xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
xhr.onreadystatechange = function() {
if (xhr.readyState === 4 && xhr.status === 200) {
var response = JSON.parse(xhr.responseText);
if (response.success) {
document.getElementById("loginForm").innerHTML = "登錄成功";
} else {
document.getElementById("loginForm").innerHTML = "登錄失敗，請檢查用戶名和密碼";
}
}
};
xhr.send("username=" + encodeURIComponent(username) + "&password=" + encodeURIComponent(password));
});
</script>

在上面的例子中，我們首先獲取了表單中的用戶名和密碼。然后使用Ajax將表單數據發送到login.php文件進行驗證。login.php文件處理完請求后，將驗證結果以JSON的形式返回給客戶端。客戶端通過解析服務器返回的JSON數據，并根據驗證結果修改頁面內容。如果驗證成功，我們顯示"登錄成功"的消息；如果驗證失敗，我們顯示"登錄失敗，請檢查用戶名和密碼"的消息。

通過上面的例子，我們可以看到使用Ajax獲取提交的form表單數據類型的過程。通過這種方式，我們可以避免頁面刷新并實現更好的用戶體驗。