< p >在現代的網頁開發中，使用 AJAX 技術獲取表單提交的數據已經成為非常常見的做法。通過 AJAX，我們可以在不刷新整個頁面的情況下，將表單的數據發送給服務器并獲取響應。本文將介紹如何使用 AJAX 獲取表單提交數據，并通過舉例說明其實際應用場景。
< p >在一個簡單的應用中，我們有一個用戶注冊的表單，其中包含用戶的姓名、電子郵件和密碼。當用戶填寫完表單并點擊提交按鈕時，我們希望將這些數據發送給服務器進行處理。傳統的方式是通過提交表單來實現這一功能，但是這樣會導致整個頁面刷新。而通過 AJAX，我們可以在后臺異步處理表單提交數據，并將結果顯示在頁面上，而不會刷新整個頁面。
< p >讓我們以一個實際的例子來說明如何使用 AJAX 獲取表單提交數據。假設我們需要創建一個簡單的待辦事項列表應用。用戶在表單中輸入待辦事項的標題和說明，并點擊提交按鈕。我們可以使用 AJAX 將表單數據發送給服務器，并將待辦事項添加到列表中，而不刷新整個頁面。以下是一個使用 jQuery 的 AJAX 代碼示例：
< pre >
$(document).ready(function(){
$("#todoForm").submit(function(e){
e.preventDefault();
var title = $("#todoTitle").val();
var description = $("#todoDesc").val();

$.ajax({
url: "add_todo.php",
type: "POST",
data: { title: title, description: description },
success: function(response){
$("#todoList").append(response);
}
});
});
});

< p >在上述代碼中，我們首先使用 jQuery 的 ready() 方法，確保頁面加載完成后再執行代碼。然后，我們在表單的 submit 事件上注冊一個處理函數。當用戶點擊表單的提交按鈕時，該函數將被觸發。
< p >為了防止表單默認的提交行為，我們使用 preventDefault() 方法取消了事件的默認操作。接下來，我們使用 jQuery 的 val() 方法獲取表單中的標題和說明。
< p >接下來，我們使用 $.ajax() 函數來發送 AJAX 請求。其中，url 表示請求的目標地址，我們將待辦事項的數據發送到名為 add_todo.php 的服務器端腳本。type 指定請求的類型為 POST，即將數據發送給服務器。data 參數指定了要發送的數據，我們將標題和說明作為鍵值對傳遞給服務器。
< p >當服務器端處理完請求后，會返回一個響應。在這個例子中，我們期望服務器端返回已添加的待辦事項的 HTML 代碼。當 AJAX 請求成功完成時，會調用 success() 函數，并將響應作為參數傳遞給該函數。在 success() 函數中，我們使用 append() 方法將響應追加到待辦事項列表中。
< p >使用 AJAX 獲取表單提交數據的好處之一是實現了無刷新的體驗。用戶在提交表單后，不需要等待頁面重新加載，即可看到結果。這在需要頻繁提交表單的應用中尤其有用，例如聊天應用、評論系統等。
< p >在本文中，我們介紹了如何使用 AJAX 獲取表單提交數據。通過 AJAX，我們可以實現無刷新提交表單，并在服務器端進行處理。我們以一個待辦事項列表應用為例，演示了如何使用 AJAX 將表單數據發送給服務器，并將結果顯示在頁面上。希望通過這個例子，讀者能夠理解如何應用 AJAX 技術來提高用戶體驗和網頁的交互性。