使用Ajax實現表單提交的功能是網站開發中常見的需求之一。通過Ajax，我們可以實現表單提交后無需刷新頁面，而是在后臺處理數據后返回相應結果，并將結果動態地顯示在頁面上。本文將介紹如何使用Ajax來編寫一個可靠有效的表單提交功能，以及如何處理返回的數據。
首先，我們需要在頁面中創建一個表單。假設我們有一個簡單的登錄表單，包含用戶名和密碼兩個輸入框以及一個提交按鈕。HTML代碼如下所示：

<p><form id="loginForm">
<p>用戶名: <input type="text" id="username" /></p>
<p>密碼: <input type="password" id="password" /></p>
<p><input type="button" value="提交" onclick="login()" /></p>
</form></p>

在這段代碼中，我們給表單元素設置了id屬性，用于后續的JavaScript操作。
接下來，我們需要編寫JavaScript代碼來處理表單提交和返回的數據。首先，我們需要定義一個登錄函數login()，用于觸發表單提交。在這個函數中，我們先獲取用戶名和密碼的輸入值，并將其作為參數傳遞給Ajax請求函數。

<p><script>
function login() {
var username = document.getElementById("username").value;
var password = document.getElementById("password").value;
// 創建XMLHttpRequest對象
var xhr = new XMLHttpRequest();
// 配置Ajax請求
xhr.open("POST", "login.php", true);
xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
// 發送請求
xhr.send("username=" + username + "&password=" + password);
// 監聽請求狀態變化
xhr.onreadystatechange = function() {
if (xhr.readyState == 4 && xhr.status == 200) {
// 處理返回的數據
var response = xhr.responseText;
// 在頁面上顯示結果
document.getElementById("result").innerHTML = response;
}
};
}
</script></p>

在這段代碼中，我們使用XMLHttpRequest對象來發送Ajax請求。通過open()方法指定請求的方法、URL和是否異步請求。通過setRequestHeader()方法設置請求頭，告知服務器請求體的數據類型。最后，我們使用send()方法發送請求，并通過onreadystatechange事件監聽請求狀態變化，在請求完成并返回成功后，我們處理返回的數據，并將結果顯示在頁面上。
同時，在頁面的某個位置，我們需要準備一個用于顯示返回結果的元素。HTML代碼如下所示：

<p><div id="result"></div></p>

通過以上步驟，我們已經完成了表單的編寫和Ajax請求的處理。接下來，我們需要在后臺編寫處理表單數據的代碼，以及返回處理結果的功能。這里使用login.php作為后臺處理代碼的示例。
在login.php中，我們可以通過$_POST全局變量獲取前端表單提交的數據，并進行后臺處理。下面是一個簡單的示例代碼：

<p><?php
$username = $_POST["username"];
$password = $_POST["password"];
// 在此處編寫驗證邏輯和其他后臺處理代碼
// 返回處理結果
if ($username == "admin" && $password == "admin") {
echo "登錄成功";
} else {
echo "用戶名或密碼錯誤";
}
?></p>

在上述代碼中，我們使用$_POST來獲取前端表單提交的數據，并進行驗證和其他的后臺處理。根據驗證結果，我們通過echo語句返回相應的處理結果。
綜上所述，我們通過以上步驟完成了一個使用Ajax實現表單提交功能的示例。通過JavaScript代碼，我們獲取表單輸入的值，并通過Ajax請求將數據發送到后臺進行處理。后臺根據處理結果返回相應的數據，然后通過JavaScript代碼將結果動態地顯示在頁面上。這種方式實現了頁面的無刷新提交和響應，提升了用戶體驗和頁面的交互效果。