隨著互聯(lián)網(wǎng)技術(shù)的發(fā)展，越來越多的網(wǎng)站采用Ajax技術(shù)來提升用戶體驗(yàn)。在傳統(tǒng)的網(wǎng)頁登錄中，用戶登錄成功后，一般會在頁面右上角顯示用戶的用戶名，以便用戶知道當(dāng)前登錄狀態(tài)。本文將介紹如何使用Ajax來實(shí)現(xiàn)登錄后顯示用戶名的功能，并結(jié)合實(shí)例進(jìn)行詳細(xì)說明。

在設(shè)計(jì)登錄功能時(shí)，首先需要創(chuàng)建一個登錄頁面，包含用戶名和密碼的輸入框，以及一個“登錄”按鈕。當(dāng)用戶點(diǎn)擊“登錄”按鈕時(shí)，通過Ajax發(fā)送登錄請求到服務(wù)器端，并獲取登錄結(jié)果。如果登錄成功，服務(wù)器端返回一個用戶名的數(shù)據(jù)；若登錄失敗，則返回一個錯誤信息。

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

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

login.js是我們自己編寫的JavaScript文件，用于處理登錄相關(guān)的邏輯。在該文件中，需要編寫一個函數(shù)來監(jiān)聽“登錄”按鈕的點(diǎn)擊事件，并在點(diǎn)擊時(shí)獲取輸入的用戶名和密碼，然后發(fā)送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("登錄請求發(fā)送失敗，請稍后再試。");
}
});
});
});

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

login.php是服務(wù)器端腳本文件，用于處理登錄請求。在該文件中，需要進(jìn)行用戶名和密碼的驗(yàn)證，并返回相應(yīng)的數(shù)據(jù)。

<?php
// 假設(shè)數(shù)據(jù)庫中的用戶名為"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獲取用戶登錄時(shí)輸入的用戶名和密碼，并與有效的用戶名和密碼進(jìn)行比較。如果匹配成功，則返回一個success為true的JSON數(shù)據(jù)，并附帶用戶名；否則返回一個success為false的JSON數(shù)據(jù)，并附帶錯誤信息。

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