在現代Web開發中，Ajax（Asynchronous JavaScript and XML）是一種強大的技術，它可以實現在不刷新頁面的情況下向后臺發送請求，并將返回的數據動態顯示在前端頁面上。在很多場景中，我們需要將后臺傳回的數據以列表的形式展示給用戶。本文將介紹如何利用Ajax技術實現這一功能。
假設我們正在開發一個圖書管理系統，用戶可以搜索圖書并查看詳細信息。我們希望在用戶輸入關鍵字進行搜索后，能夠立即將搜索結果以列表的形式顯示在前端頁面上，而不需要每次搜索都重新加載頁面。通過Ajax技術，我們可以輕松實現這一功能。
首先，我們需要編寫前端代碼，包括HTML、CSS和JavaScript部分。在HTML中，我們可以使用一個文本輸入框和一個按鈕，用于用戶輸入關鍵字和觸發搜索操作。在CSS中，我們可以為列表項定義樣式，如字體、顏色、邊框等。在JavaScript中，我們使用Ajax來發送搜索請求，并將返回的數據以列表的形式添加到頁面中。
以下是示例代碼：
<html><head><title>圖書管理系統</title><style>.list-item {
font-size: 14px;
color: #333;
border: 1px solid #ccc;
margin-bottom: 10px;
padding: 10px;
}
</style><script src="https://cdn.jsdelivr.net/npm/jquery@3.6.0/dist/jquery.min.js"></script><script>$(document).ready(function () {
$("#searchBtn").click(function () {
var keyword = $("#keyword").val();
$.ajax({
url: "search.php",
type: "POST",
data: { keyword: keyword },
success: function (data) {
$("#list").empty();
data.forEach(function (item) {
var listItem = "<div class='list-item'>" + item.title + "</div>";
$("#list").append(listItem);
});
}
});
});
});
</script></head><body><h1>圖書管理系統</h1><input type="text" id="keyword" placeholder="請輸入關鍵字"><button id="searchBtn">搜索</button><div id="list"></div></body></html>在上面的代碼中，我們首先引入了jQuery庫，它簡化了我們對DOM元素的操作。在JavaScript中，我們使用了`$(document).ready()`函數來確保頁面加載完成后才執行相關代碼。當用戶點擊搜索按鈕時，我們獲取輸入框中的關鍵字，并使用Ajax發送POST請求到"search.php"頁面。在服務器端，我們可以根據關鍵字進行數據庫查詢，并將結果返回給前端頁面。
在成功接收到后臺返回的數據后，我們首先清空列表容器（id為"list"的div），然后使用forEach函數遍歷每個搜索結果項，并將其添加到列表容器中。每個列表項使用class為"list-item"的元素表示，可以根據需要自定義樣式。
在后臺（"search.php"）部分，我們可以使用PHP或其他后端語言完成數據庫查詢，并將結果以JSON格式返回給前端頁面。以下是一個簡單的"search.php"代碼示例：
<?php
// 連接數據庫，執行查詢操作
$pdo = new PDO("mysql:host=localhost;dbname=books","username","password");
$keyword = $_POST['keyword'];
$stmt = $pdo->prepare("SELECT * FROM books WHERE title LIKE ?");
$stmt->execute(["%$keyword%"]);
$results = $stmt->fetchAll(PDO::FETCH_ASSOC);
// 返回結果
header('Content-Type: application/json');
echo json_encode($results);
?>在上面的代碼中，我們首先連接到數據庫，并執行一條查詢語句，根據關鍵字（從$_POST中獲取）進行模糊匹配。查詢結果以數組的形式存儲在$results變量中。最后，我們將結果轉換為JSON格式，并添加合適的Content-Type頭部，以便前端能夠正確解析返回的數據。
總結起來，利用Ajax技術實現后臺傳值顯示在前端列表相對簡單。我們需要編寫前端代碼，包括HTML、CSS和JavaScript部分，使用jQuery庫簡化DOM操作，發送Ajax請求并根據返回的數據動態更新前端頁面。同時，在后臺我們需要根據需求編寫數據查詢代碼，并將結果以JSON格式返回給前端。這個例子給出了一個基本的示例，你可以根據實際需求進行修改和擴展。上一篇python直線和圓交點
下一篇macos 13更新什么