使用Ajax獲取數(shù)據(jù)后，頁面回顯是一種常見的網(wǎng)頁交互方式。通過Ajax技術，我們可以在不刷新整個頁面的情況下，向服務器發(fā)送異步請求并獲取數(shù)據(jù)，然后將這些數(shù)據(jù)動態(tài)地展示在頁面上。這為用戶提供了更好的交互體驗。本文將重點講述如何通過Ajax獲取數(shù)據(jù)，并通過實例說明如何在頁面中回顯這些數(shù)據(jù)。
首先，讓我們考慮一個簡單的場景：假設我們有一個商品列表頁，需要從服務器獲取商品的相關信息，如商品名稱、價格等，并在頁面中進行展示。一種常見的做法是使用Ajax獲取這些數(shù)據(jù)，并將獲取到的數(shù)據(jù)回顯到頁面上。
在頁面中我們通常會創(chuàng)建一個用于展示商品列表的容器，例如一個div元素，通過JavaScript代碼使用Ajax技術向服務器發(fā)送請求，獲取商品數(shù)據(jù)，并將其回顯到這個容器中。以下是一個實例：

html
<div id="productList"></div>
<script>
// 創(chuàng)建Ajax對象
var xhr = new XMLHttpRequest();
// 發(fā)送GET請求
xhr.open('GET','url',true);
// 注冊回調函數(shù)
xhr.onreadystatechange = function(){
// 請求完成并成功返回數(shù)據(jù)
if(xhr.readyState == 4 && xhr.status == 200){
// 獲取服務器返回的數(shù)據(jù)
var data = JSON.parse(xhr.responseText);
// 獲取商品列表容器
var productList = document.getElementById('productList');
// 清空容器內容
productList.innerHTML = '';
// 循環(huán)遍歷商品數(shù)據(jù)
for(var i = 0; i < data.length; i++){
// 創(chuàng)建一個新的商品元素
var product = document.createElement('div');
// 設置商品名稱
product.innerHTML = data[i].name;
// 將商品元素添加到商品列表容器中
productList.appendChild(product);
}
}
}
// 發(fā)送Ajax請求
xhr.send();
</script>

以上代碼中，我們創(chuàng)建了一個Ajax對象，通過調用open方法指定請求的類型和URL，并通過指定一個回調函數(shù)來處理請求的響應。當請求成功返回數(shù)據(jù)時，我們解析服務器返回的數(shù)據(jù)，并通過動態(tài)創(chuàng)建商品元素的方式將商品名稱添加到商品列表容器中。這樣就實現(xiàn)了通過Ajax獲取數(shù)據(jù)后的頁面回顯。
下面我們再看一個例子，假設我們的網(wǎng)頁中有一個表單，用戶填寫表單后，點擊提交按鈕，我們需要將用戶輸入的數(shù)據(jù)發(fā)送到服務器端，并在頁面中回顯提交結果。以下是一個實例：

html
<form id="submitForm">
<input type="text" id="name" placeholder="請輸入姓名">
<input type="text" id="email" placeholder="請輸入郵箱">
<button type="button" onclick="submitForm()">提交</button>
</form>
<div id="result"></div>
<script>
function submitForm(){
// 獲取表單元素
var name = document.getElementById('name').value;
var email = document.getElementById('email').value;
// 創(chuàng)建Ajax對象
var xhr = new XMLHttpRequest();
// 發(fā)送POST請求
xhr.open('POST','url',true);
xhr.setRequestHeader('Content-type','application/x-www-form-urlencoded');
// 注冊回調函數(shù)
xhr.onreadystatechange = function(){
// 請求完成并成功返回數(shù)據(jù)
if(xhr.readyState == 4 && xhr.status == 200){
// 獲取服務器返回的數(shù)據(jù)
var result = JSON.parse(xhr.responseText);
// 獲取結果容器
var resultContainer = document.getElementById('result');
// 清空容器內容
resultContainer.innerHTML = '';
// 根據(jù)提交結果回顯提示信息
if(result.success){
resultContainer.innerHTML = '提交成功';
} else {
resultContainer.innerHTML = '提交失敗，請重試';
}
}
}
// 發(fā)送Ajax請求
xhr.send('name=' + name + '&email=' + email);
}
</script>

在以上代碼中，我們給表單的提交按鈕綁定了一個調用submitForm函數(shù)的點擊事件，在該函數(shù)中獲取表單中用戶輸入的數(shù)據(jù)，并通過Ajax技術將數(shù)據(jù)發(fā)送到服務器中。當請求成功返回數(shù)據(jù)后，我們解析服務器返回的結果，并根據(jù)提交結果在頁面中回顯相應的提示信息。
可以看到，通過使用Ajax獲取數(shù)據(jù)后頁面回顯，可以實現(xiàn)動態(tài)加載數(shù)據(jù)、實時刷新頁面內容，提升用戶體驗。在實際開發(fā)中，我們可以根據(jù)具體的需求和業(yè)務場景來使用Ajax技術來實現(xiàn)頁面回顯功能，提升網(wǎng)站的用戶交互性。