AJAX（Asynchronous JavaScript and XML）是一種前端技術，可以使網頁實現異步請求和動態更新內容。通過 AJAX，我們可以從表單中獲取數據并進行格式化處理，使其符合我們的需求。本文將詳細介紹如何使用 AJAX 從表單中獲取數據并進行格式化，以及使用豐富的示例來說明。

在 Web 開發中，表單是非常常見的元素之一。當用戶在表單中輸入數據后，我們經常需要獲取這些數據，并根據我們的業務邏輯進行處理。在傳統的開發模式中，我們需要刷新整個頁面或者重新加載頁面才能獲取最新的數據，這導致用戶體驗不佳。而使用 AJAX 技術，我們可以實現無刷新頁面的數據獲取和處理，大大提升用戶的使用體驗。

通過 AJAX 從表單中獲取數據可以使用多種方法，其中最常見的方法是使用 jQuery 庫的 $.ajax() 方法來發送異步請求。下面的示例代碼展示了如何使用 $.ajax() 方法從一個表單中獲取數據：

$('form').submit(function(e) {
e.preventDefault(); // 阻止表單的默認提交行為
var formData = $(this).serialize(); // 將表單數據序列化為字符串
$.ajax({
url: 'process.php', // 請求的 URL 地址
type: 'POST', // 請求的類型，可以是 GET 或者 POST
data: formData, // 發送的數據
success: function(response) { // 請求成功的回調函數
// 在這里對返回的數據進行格式化處理
console.log(response);
},
error: function() { // 請求失敗的回調函數
console.log('Error occurred during AJAX request');
}
});
});

在上面的代碼中，我們首先使用 jQuery 的選擇器選中了一個表單元素，并通過 submit() 方法為其綁定了一個 submit 事件的處理函數。在事件處理函數中，我們使用 preventDefault() 方法阻止了表單的默認提交行為，然后調用了 serialize() 方法將表單數據序列化為字符串。接著，我們使用 $.ajax() 方法發送了一個 POST 請求，并將序列化后的表單數據作為請求的參數傳遞給服務器端。當請求成功返回后，success 回調函數會被觸發，并將服務器端返回的數據作為參數傳遞給函數。我們可以在這個回調函數中對數據進行格式化處理。

下面是一個實際的例子，假設我們有一個簡單的登錄頁面，包含用戶名和密碼兩個輸入框，在用戶提交表單后，我們將通過 AJAX 技術獲取到用戶輸入的用戶名和密碼，并將其格式化為 JSON 對象。示例代碼如下：

$('form').submit(function(e) {
e.preventDefault();
var formData = $(this).serialize();
$.ajax({
url: 'login.php',
type: 'POST',
data: formData,
success: function(response) {
// 將返回的數據格式化為 JSON 對象
var data = JSON.parse(response);
console.log(data.username);
console.log(data.password);
},
error: function() {
console.log('Error occurred during AJAX request');
}
});
});

在上面的代碼中，我們假設服務器端返回的數據為以下格式的 JSON 字符串：

{
"username": "John Doe",
"password": "123456"
}

我們通過在 success 回調函數中使用 JSON.parse() 方法將返回的 JSON 字符串解析為 JavaScript 對象，并可以通過對象的屬性來訪問用戶名和密碼字段。這樣，我們就成功地從表單中獲取到了數據，并將其格式化為我們需要的格式。

總之，使用 AJAX 從表單中獲取并格式化數據是一種非常常見的前端開發需求。借助 AJAX 技術，我們可以實現無刷新頁面的數據獲取和處理，提升用戶的使用體驗。通過示例代碼的詳細說明，相信讀者對如何使用 AJAX 從表單中獲取數據并進行格式化有了更深入的理解。希望本文對您的學習有所幫助！