Ajax是一種用于在不刷新整個頁面的情況下更新部分網頁內容的技術。在表單提交方面，可以通過Ajax來獲取表單中的值，并實現實時的數據更新。本文將詳細介紹如何使用Ajax獲取表單中的值。
在實際應用中，我們經常會遇到需要更新頁面內容而不希望整體刷新的情況。例如，在一個用戶注冊的表單中，當用戶輸入完畢之后，我們希望實時地檢查用戶輸入的合法性并給出相應的反饋。這時候，我們可以通過Ajax獲取表單中的值，然后發送給服務器進行驗證。下面我們以一個簡單的表單驗證的例子來演示如何使用Ajax獲取表單中的值。
首先，我們在HTML頁面中定義一個表單，包含一個輸入框和一個按鈕：

html
<form>
<input type="text" id="username" name="username" placeholder="請輸入用戶名">
<button type="button" onclick="checkUsername()">檢查用戶名</button>
</form>

接下來，我們使用JavaScript編寫一個Ajax函數checkUsername()來獲取表單中輸入框的值，并向服務器發送請求：

javascript
function checkUsername() {
var username = document.getElementById("username").value;
// 創建XMLHttpRequest對象
var xhr = new XMLHttpRequest();
// 設置請求方式和URL
xhr.open("POST", "check_username.php", true);
// 設置響應的數據類型
xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
// 發送請求
xhr.send("username=" + username);
// 處理服務器響應
xhr.onreadystatechange = function() {
if (xhr.readyState == 4 && xhr.status == 200) {
var response = xhr.responseText;
// 根據服務器的響應結果進行相應處理
if (response == "valid") {
// 用戶名可用的處理邏輯
alert("用戶名可用！");
} else {
// 用戶名已存在的處理邏輯
alert("用戶名已存在，請重新輸入！");
}
}
};
}

在上述代碼中，我們首先通過document.getElementById()方法獲取輸入框的值，并將其賦給變量username。然后，我們創建了一個XMLHttpRequest對象，并使用xhr.open()方法設置了請求方式為POST，并指定了提交的URL。接著，我們使用xhr.setRequestHeader()方法設置了請求的數據類型。最后，我們使用xhr.send()方法將用戶名作為請求數據發送給服務器。
在服務器端，我們可以根據接收到的用戶名進行驗證，并返回相應的結果。這里我們假設服務器端使用PHP處理請求，下面是一個簡單的服務器端腳本check_username.php的示例：

php
<?php
$username = $_POST['username'];
// 在這里進行用戶名驗證的邏輯處理
// ...
if (/* 用戶名可用 */) {
echo "valid";
} else {
echo "invalid";
}
?>

在這個示例中，我們首先通過$_POST超全局變量獲取到前端發送的用戶名。然后，在服務器端進行了相應的驗證邏輯處理，根據驗證結果返回相應的響應。在本例中，如果用戶名可用，我們返回了字符串"valid"，否則返回了字符串"invalid"。
最后，在前端的xhr.onreadystatechange事件中，我們根據服務器的響應結果進行相應的處理。如果服務器返回的響應是"valid"，我們彈出一個提示框顯示"用戶名可用！"；如果服務器返回的響應是"invalid"，我們彈出一個提示框顯示"用戶名已存在，請重新輸入！"。
通過上述的例子，我們可以看到如何使用Ajax獲取表單中的值，并實現實時的數據更新。無論是表單驗證、自動補全還是其他實時數據更新的場景，Ajax都能發揮重要的作用。掌握了這種技術，我們能夠更加靈活地進行網頁開發，并提升用戶體驗。