本文將介紹如何使用Ajax獲取用戶信息并顯示在網頁上。通過這種方式，我們可以異步地從服務器獲取用戶的個人信息并動態地將其展現在頁面上，而無需刷新整個頁面。

以一個簡單的個人資料網頁為例，我們希望在用戶輸入自己的用戶名后，能夠從服務器獲取并顯示該用戶的姓名、年齡和聯系方式。

$.ajax({
url: 'getUserInfo.php',
type: 'POST',
data: {username: 'JohnDoe'},
success: function(response) {
var userInfo = JSON.parse(response);
$('#name').text(userInfo.name);
$('#age').text(userInfo.age);
$('#contact').text(userInfo.contact);
}
});

上述代碼中，我們使用了jQuery的$.ajax函數向服務器發送請求。其中，url參數指定了用于獲取用戶信息的PHP文件，type參數指定了請求的方式為POST，data參數指定了傳遞的參數，這里我們傳遞了用戶名。在服務器端接收到請求后，會根據用戶名查詢數據庫，返回該用戶的個人信息。

在Ajax請求的success回調函數中，我們首先將服務器返回的字符串數據轉換為一個JavaScript對象，然后使用選擇器找到頁面上的姓名、年齡和聯系方式元素，并使用text方法將對應的個人信息顯示出來。

通過這種方式，用戶可以在一個輸入框中輸入自己的用戶名，然后直接在頁面上看到自己的個人信息，而無需刷新整個頁面。

除了從服務器獲取用戶信息之外，我們還可以通過Ajax將用戶的修改動作傳遞給服務器。例如，如果用戶希望修改自己的聯系方式，可以在頁面上輸入新的聯系方式，并點擊“保存”按鈕。

$('#saveButton').click(function() {
var newContact = $('#newContact').val();
$.ajax({
url: 'updateContact.php',
type: 'POST',
data: {username: 'JohnDoe', contact: newContact},
success: function(response) {
$('#contact').text(newContact);
}
});
});

上述代碼中，我們在點擊保存按鈕時，首先獲取頁面上輸入框中的新聯系方式值。然后，使用$.ajax函數向服務器發送更新請求，并傳遞了用戶名和新聯系方式作為參數。在服務器接收到請求后，會將新的聯系方式更新到數據庫中。

在Ajax請求的success回調函數中，我們直接將新聯系方式的值顯示到頁面上的聯系方式元素中，實現了頁面上聯系方式的實時更新。

總之，通過使用Ajax可以實現在不刷新整個頁面的情況下，獲取和展示用戶的個人信息。這種技術使得用戶可以更加方便地瀏覽和更新自己的信息，提升了用戶體驗和交互性。