在現代的網頁應用中，用戶登錄已經成為一個非常常見的需求。而 Ajax 技術的運用可以使得用戶在登錄后獲得實時的登錄狀態反饋，提升用戶的體驗。本文將通過一個實例來演示如何使用 Ajax 技術實現登錄后的狀態顯示。

假設我們有一個網頁應用，要求用戶在登錄之后顯示“已登錄”，而在未登錄或登錄失敗時顯示“未登錄”。下面是一個簡化的 HTML 表單：

<form id="login-form" action="/login" method="post">
<label for="username">用戶名：</label>
<input type="text" id="username" name="username">
<label for="password">密碼：</label>
<input type="password" id="password" name="password">
<input type="submit" value="登錄">
</form>
<p id="login-status"></p>

上面的表單包含了用戶名和密碼的輸入框，以及一個登錄按鈕。我們還添加了一個空的 p 標簽用于顯示登錄狀態。

現在我們可以使用 jQuery 的 Ajax 方法來監聽表單的提交事件，并向服務器發送登錄請求。接下來是 JavaScript 代碼：

$(document).ready(function() {
$('#login-form').submit(function(event) {
event.preventDefault();
var username = $('#username').val();
var password = $('#password').val();
$.ajax({
url: '/login',
method: 'POST',
data: { username: username, password: password },
success: function(response) {
if (response.success) {
$('#login-status').text('已登錄');
} else {
$('#login-status').text('登錄失敗，請檢查用戶名和密碼');
}
},
error: function() {
$('#login-status').text('登錄失敗，請檢查網絡連接');
}
});
});
});

上述代碼中，我們首先使用 preventDefault 方法阻止表單默認的提交行為。然后獲取用戶名和密碼的值，并使用 Ajax 方法發送 POST 請求到服務器的 /login 路徑。服務器返回的響應會根據登錄成功與否指示 success 字段的值。如果登錄成功，則將登錄狀態顯示為“已登錄”，否則顯示相應的錯誤信息。

例如，如果用戶名和密碼正確，服務器返回的響應可能是這樣的：

{ "success": true }

此時，p 標簽中的文本將變為“已登錄”，告知用戶登錄成功。

如果用戶名或密碼錯誤，服務器返回的響應可能是這樣的：

{ "success": false }

這時，p 標簽中的文本將變為“登錄失敗，請檢查用戶名和密碼”，提醒用戶檢查登錄信息。

如果發生了網絡連接錯誤，服務器返回的響應可能為空，或者根本無法連接到服務器。這時，p 標簽中的文本將變為“登錄失敗，請檢查網絡連接”，告知用戶無法進行登錄操作。

通過使用 Ajax 技術，我們可以實時顯示登錄狀態，并根據服務器的響應調整狀態文本。這種交互方式可以提升用戶的體驗，減少用戶的等待時間。實際應用中，我們還可以根據用戶的登錄狀態來展示不同的頁面內容，以及進行其他相關操作。