接下來，我們需要編寫JavaScript代碼，通過AJAX將表單數(shù)據(jù)發(fā)送給服務(wù)器。使用XMLHttpRequest對象可以實(shí)現(xiàn)這一功能。以下是一個簡單的示例：

<script>
var form = document.getElementById('loginForm');
form.addEventListener('submit', function(event) {
event.preventDefault(); // 阻止表單的默認(rèn)提交行為
var username = document.getElementById('username').value;
var password = document.getElementById('password').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 = xhr.responseText; // 服務(wù)器返回的數(shù)據(jù)
// 更新頁面上的內(nèi)容
document.getElementById('responseDiv').innerHTML = response;
}
};
var data = 'username=' + encodeURIComponent(username) + '&password=' + encodeURIComponent(password);
xhr.send(data);
});
</script>

在上述代碼中，我們首先通過addEventListener()方法給表單添加了一個submit事件監(jiān)聽器。在事件處理函數(shù)中，我們使用event.preventDefault()方法阻止表單的默認(rèn)提交行為，以便通過AJAX來處理表單數(shù)據(jù)。

然后，我們通過document.getElementById()方法獲取了表單中用戶名和密碼輸入框的值，并使用XMLHttpRequest對象發(fā)送了一個POST請求到指定的服務(wù)器端腳本（login.php）。在發(fā)送請求前，我們使用xhr.setRequestHeader()方法設(shè)置了請求頭，指明數(shù)據(jù)的格式為"application/x-www-form-urlencoded"。然后，我們使用xhr.onreadystatechange()方法監(jiān)聽服務(wù)器的響應(yīng)，并在響應(yīng)成功時更新頁面上的內(nèi)容。

最后，我們使用xhr.send()方法將表單數(shù)據(jù)發(fā)送給服務(wù)器。這里要注意，我們需要對用戶名和密碼進(jìn)行encodeURIComponent()編碼，以確保數(shù)據(jù)能夠正確傳輸。

二、服務(wù)器端代碼處理表單數(shù)據(jù)

在上一節(jié)中，我們通過AJAX將表單數(shù)據(jù)發(fā)送給了服務(wù)器端的腳本（login.php）。現(xiàn)在讓我們來看一下如何在服務(wù)器端處理這些數(shù)據(jù)，并返回相應(yīng)的結(jié)果。

<?php
$username = $_POST['username'];
$password = $_POST['password'];
// 在這里進(jìn)行驗(yàn)證邏輯...
// 返回結(jié)果
if ($valid) {
echo '登錄成功！';
} else {
echo '用戶名或密碼錯誤！';
}
?>

在上述代碼中，我們通過$_POST數(shù)組獲取了從客戶端發(fā)送過來的表單數(shù)據(jù)。然后，我們可以根據(jù)具體的需求進(jìn)行驗(yàn)證邏輯，如檢查用戶名和密碼是否正確等。

最后，通過echo語句向客戶端返回結(jié)果。在這個簡單的示例中，我們只是返回了一段文本，但實(shí)際上你可以根據(jù)實(shí)際情況返回不同的數(shù)據(jù)，如JSON格式的數(shù)據(jù)、HTML片段等。

三、頁面更新結(jié)果

現(xiàn)在，當(dāng)用戶在登錄表單中輸入用戶名和密碼并點(diǎn)擊"登錄"按鈕后，表單數(shù)據(jù)將通過AJAX發(fā)送給服務(wù)器端腳本進(jìn)行處理。服務(wù)器端驗(yàn)證完成后，根據(jù)驗(yàn)證結(jié)果，服務(wù)器會返回相應(yīng)的結(jié)果。

在客戶端，我們可以通過更新頁面相應(yīng)的元素來顯示服務(wù)器端返回的結(jié)果。例如，我們可以創(chuàng)建一個用于顯示結(jié)果的

<div id="responseDiv"></div>

document.getElementById('responseDiv').innerHTML = response;