本文將介紹如何使用Ajax技術(shù)從數(shù)據(jù)庫獲取圖片并在網(wǎng)頁上顯示。通過這種方式，我們可以實現(xiàn)在不刷新整個頁面的情況下動態(tài)加載圖片，提升用戶的體驗。以一個簡單的圖片庫為例，假設我們有一個數(shù)據(jù)庫表格，其中存儲了多張圖片的路徑和相關(guān)信息。我們將通過Ajax請求從數(shù)據(jù)庫中獲取這些圖片，并將它們顯示在網(wǎng)頁上。

首先，我們需要創(chuàng)建一個HTML頁面，其中包含一個用于顯示圖片的div元素。為了實現(xiàn)Ajax請求，我們需要使用JavaScript的XMLHttpRequest對象來與服務器進行通信。下面是一個簡單的示例代碼：

<div id="image-display"></div>
<script>
var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function() {
if (xhr.readyState === 4 && xhr.status === 200) {
var response = JSON.parse(xhr.responseText);
var images = response.images;
var displayDiv = document.getElementById("image-display");
for (var i = 0; i < images.length; i++) {
var img = document.createElement("img");
img.src = images[i].path;
img.alt = images[i].description;
displayDiv.appendChild(img);
}
}
};
xhr.open("GET", "getImages.php", true);
xhr.send();
</script>

在上面的代碼中，我們使用XMLHttpRequest對象創(chuàng)建了一個異步的GET請求，請求地址為"getImages.php"。一旦服務器返回響應，我們會在回調(diào)函數(shù)中處理該響應。首先，我們將服務器返回的JSON字符串解析為一個JavaScript對象。然后，我們從該對象中獲取了圖片的路徑和相關(guān)信息。接下來，我們遍歷圖片數(shù)組，為每個圖片創(chuàng)建一個元素，并將其添加到網(wǎng)頁上的

<?php
$servername = "localhost";
$username = "your_username";
$password = "your_password";
$dbname = "your_database";
$conn = new mysqli($servername, $username, $password, $dbname);
if ($conn->connect_error) {
die("Connection failed: " . $conn->connect_error);
}
$sql = "SELECT path, description FROM images";
$result = $conn->query($sql);
if ($result->num_rows > 0) {
$images = array();
while ($row = $result->fetch_assoc()) {
$image = array(
'path' => $row['path'],
'description' => $row['description']
);
array_push($images, $image);
}
echo json_encode(array('images' => $images));
} else {
echo "0 results";
}
$conn->close();
?>