今天我們來聊一下使用AJAX從數據庫中獲取數據的方法。AJAX（Asynchronous JavaScript and XML）是一種通過后臺與服務器進行數據交互的技術，它可以實現無需刷新頁面就能獲取最新的數據庫數據，極大地提升了用戶體驗。下面我們就來看一些實際的例子。

假設我們有一個網站，上面展示著各種商品信息。我們想要通過AJAX從數據庫中獲取商品列表，并實時地顯示在網頁上。首先，我們需要編寫一個后臺腳本來連接數據庫并提供數據。

// 后臺腳本(PHP)獲取商品列表并返回JSON數據
$servername = "localhost";
$username = "root";
$password = "123456";
$dbname = "myDB";
// 創建與數據庫的連接
$conn = new mysqli($servername, $username, $password, $dbname);
// 檢查連接是否成功
if ($conn->connect_error) {
die("連接數據庫失敗: " . $conn->connect_error);
}
// 查詢數據庫獲取商品列表
$sql = "SELECT * FROM products";
$result = $conn->query($sql);
// 將查詢結果轉換成JSON格式并輸出
$data = array();
if ($result->num_rows > 0) {
while($row = $result->fetch_assoc()) {
$data[] = $row;
}
}
echo json_encode($data);
// 關閉與數據庫的連接
$conn->close();

上述代碼首先通過mysqli類與數據庫建立連接，并查詢products表中的所有記錄。然后將查詢結果逐行存入$data數組中，并最后使用json_encode()函數將數組轉換成JSON數據返回給前端頁面。

接下來，我們需要在前端頁面中使用AJAX來獲取后臺腳本返回的數據，并將其展示在網頁上。以下是一個簡單的示例：

// 前端頁面使用AJAX獲取商品數據并展示
$.ajax({
url: "get_products.php",
method: "GET",
dataType: "json",
success: function(data) {
// 將獲取到的數據展示在網頁上
for(var i in data) {
$("#product-list").append("<li>" + data[i].name + "</li>");
}
},
error: function(xhr, status, error) {
console.error("AJAX請求出錯: " + error);
}
});

上述代碼使用了jQuery框架的ajax()函數，通過指定后臺腳本的URL、請求方法和返回的數據類型來向后臺發送請求。在成功獲取數據后，我們遍歷返回的JSON數據，將每個商品的名稱添加為一個