Ajax是一種用于在Web應用中異步傳輸數據的技術。通過使用Ajax，我們可以實現在不刷新整個頁面的情況下，僅更新頁面的一部分內容。本文將介紹如何展示從Ajax獲取的數據。通過使用JavaScript和相關的DOM操作，我們可以將獲取到的數據以多種形式展示出來，比如列表、表格以及圖表等。

假設我們正在開發一個電商網站，用戶可以通過搜索框輸入商品名稱來查詢相關的商品。當用戶輸入關鍵詞并點擊搜索按鈕后，我們可以通過Ajax向服務器發送請求，并獲取返回的商品列表數據。然后，我們可以將這些數據展示在頁面上，供用戶瀏覽。

function searchProduct(keyword) {
// 發送Ajax請求并獲取返回的數據
// ...
var productList = response.data;
// 清空之前的搜索結果
document.getElementById("product-list").innerHTML = "";
// 展示搜索結果
productList.forEach(function(product) {
var productItem = document.createElement("div");
productItem.innerHTML = product.name;
document.getElementById("product-list").appendChild(productItem);
});
}
// 監聽搜索按鈕的點擊事件
document.getElementById("search-btn").addEventListener("click", function() {
var keyword = document.getElementById("search-input").value;
searchProduct(keyword);
});

在上述例子中，我們首先定義了一個名為searchProduct的JavaScript函數。當用戶點擊搜索按鈕后，該函數會被調用。在這個函數中，我們發送Ajax請求并獲取返回的商品列表數據。然后，我們清空之前的搜索結果，并遍歷商品列表數據，為每個商品創建一個div元素，并將商品名稱添加到該div中。最后，我們將這些div元素添加到頁面上的一個容器中，展示搜索結果。

除了展示列表數據，我們還可以通過Ajax獲取其他類型的數據，并以不同的形式展示出來。例如，我們可以獲取到一組用戶的信息，并將其以表格的形式展示出來。

function fetchUsers() {
// 發送Ajax請求并獲取返回的用戶信息數據
// ...
var users = response.data;
// 創建表格元素
var table = document.createElement("table");
// 創建表頭
var thead = document.createElement("thead");
var headRow = document.createElement("tr");
var headers = ["ID", "姓名", "郵箱"];
headers.forEach(function(header) {
var th = document.createElement("th");
th.innerHTML = header;
headRow.appendChild(th);
});
thead.appendChild(headRow);
table.appendChild(thead);
// 創建表格內容
var tbody = document.createElement("tbody");
users.forEach(function(user) {
var row = document.createElement("tr");
var idCell = document.createElement("td");
idCell.innerHTML = user.id;
row.appendChild(idCell);
var nameCell = document.createElement("td");
nameCell.innerHTML = user.name;
row.appendChild(nameCell);
var emailCell = document.createElement("td");
emailCell.innerHTML = user.email;
row.appendChild(emailCell);
tbody.appendChild(row);
});
table.appendChild(tbody);
// 清空之前的表格數據
document.getElementById("user-table").innerHTML = "";
// 展示表格
document.getElementById("user-table").appendChild(table);
}
// 頁面加載完成后獲取用戶信息并展示表格
document.addEventListener("DOMContentLoaded", function() {
fetchUsers();
});

在上述例子中，我們定義了一個名為fetchUsers的JavaScript函數，函數內部通過Ajax獲取用戶信息，并將其以表格的形式展示出來。首先，我們創建了一個table元素，并創建了表頭和表格內容，然后將其添加到用戶頁面上的一個容器中。最后，我們通過頁面加載完成事件來調用fetchUsers函數，以在頁面加載完成后獲取用戶信息并展示表格。

通過上述例子，我們可以看到通過使用Ajax獲取的數據可以以多種形式展示出來。我們可以根據具體的需求選擇列表、表格或者其他形式來展示數據，以提升用戶的交互體驗。