隨著互聯網技術的發展，越來越多的網站采用Ajax技術來提升用戶體驗。在傳統的網頁登錄中，用戶登錄成功后，一般會在頁面右上角顯示用戶的用戶名，以便用戶知道當前登錄狀態。本文將介紹如何使用Ajax來實現登錄后顯示用戶名的功能，并結合實例進行詳細說明。

在設計登錄功能時，首先需要創建一個登錄頁面，包含用戶名和密碼的輸入框，以及一個“登錄”按鈕。當用戶點擊“登錄”按鈕時，通過Ajax發送登錄請求到服務器端，并獲取登錄結果。如果登錄成功，服務器端返回一個用戶名的數據；若登錄失敗，則返回一個錯誤信息。

接下來是實現的具體步驟。首先，在頁面的頭部引入jQuery庫，用于簡化JavaScript操作。同時，還需要引入一個用于處理登錄請求的服務器端腳本文件login.php。

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="login.js"></script>

login.js是我們自己編寫的JavaScript文件，用于處理登錄相關的邏輯。在該文件中，需要編寫一個函數來監聽“登錄”按鈕的點擊事件，并在點擊時獲取輸入的用戶名和密碼，然后發送Ajax請求。

$(document).ready(function() {
$("#loginBtn").click(function() {
var username = $("#username").val();
var password = $("#password").val();
$.ajax({
url: "login.php",
method: "POST",
data: {username: username, password: password},
success: function(response) {
if (response.success) {
$("#loggedInUsername").text(response.username);
} else {
alert("登錄失敗：" + response.message);
}
},
error: function() {
alert("登錄請求發送失敗，請稍后再試。");
}
});
});
});

在上述代碼中，我們通過ID選擇器獲取用戶名和密碼的輸入框的值，并使用POST方式發送Ajax請求到login.php。成功接收到服務器端返回的數據后，可以根據返回的success字段來判斷登錄是否成功。若成功，則將返回的username字段插入到id為"loggedInUsername"的元素中；若失敗，則彈出錯誤信息。

login.php是服務器端腳本文件，用于處理登錄請求。在該文件中，需要進行用戶名和密碼的驗證，并返回相應的數據。

<?php
// 假設數據庫中的用戶名為"admin"，密碼為"123456"
$validUsername = "admin";
$validPassword = "123456";
$response = array();
if ($_SERVER['REQUEST_METHOD'] == 'POST') {
$username = $_POST['username'];
$password = $_POST['password'];
if ($username == $validUsername && $password == $validPassword) {
$response['success'] = true;
$response['username'] = $validUsername;
} else {
$response['success'] = false;
$response['message'] = "用戶名或密碼錯誤，請重新輸入。";
}
}
echo json_encode($response);
?>

在login.php中，我們首先定義了一個有效的用戶名和密碼。然后，通過$_POST獲取用戶登錄時輸入的用戶名和密碼，并與有效的用戶名和密碼進行比較。如果匹配成功，則返回一個success為true的JSON數據，并附帶用戶名；否則返回一個success為false的JSON數據，并附帶錯誤信息。

通過上述的JavaScript和PHP代碼，我們成功實現了登錄后顯示用戶名的功能。用戶在輸入正確的用戶名和密碼并點擊登錄按鈕后，頁面右上角的用戶名區塊會顯示用戶的用戶名。如果輸入的用戶名或密碼錯誤，則會彈出相應的錯誤提示。借助Ajax技術，我們可以在不刷新整個頁面的情況下，實現登錄狀態的實時更新，進一步提升用戶的交互體驗。