AJAX 是一種可以在 web 頁面中實現異步數據傳輸的技術。通過使用 AJAX，我們可以在不刷新整個頁面的情況下從服務器獲取數據并更新我們的頁面。本文將詳細介紹如何使用 AJAX 獲取數據庫數據的方法。
在使用 AJAX 獲取數據庫數據之前，我們需要先創建一個后端接口，該接口將負責與數據庫進行交互并返回我們需要的數據。以 PHP 后端語言為例，我們可以使用以下代碼創建一個獲取數據庫數據的接口：
<?php
// 連接數據庫
$dsn = 'mysql:host=localhost;dbname=test';
$username = 'root';
$password = '';
try {
$pdo = new PDO($dsn, $username, $password);
$pdo->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);
} catch (PDOException $e) {
echo 'Connection failed: ' . $e->getMessage();
die();
}
// 查詢數據庫數據
$sql = "SELECT * FROM users";
$stmt = $pdo->prepare($sql);
$stmt->execute();
$data = $stmt->fetchAll(PDO::FETCH_ASSOC);
// 返回數據
header('Content-Type: application/json');
echo json_encode($data);
?>通過以上代碼，我們可以創建一個名為getData.php的 PHP 文件作為我們的后端接口。該接口將連接數據庫，并執行一個 SQL 查詢語句獲取用戶數據。最后，它將以 JSON 格式返回數據。
接下來，我們將在前端使用 AJAX 通過該接口獲取數據庫數據并更新頁面。以下是一個基本的 HTML 頁面示例：
<!DOCTYPE html>
<html>
<head>
<title>AJAX 獲取數據庫數據</title>
<script src="https://cdn.jsdelivr.net/npm/jquery/dist/jquery.min.js"></script>
</head>
<body>
<h1>用戶列表</h1>
<ul id="user-list"></ul>
<script>
// 使用 AJAX 獲取數據庫數據
$.ajax({
url: 'getData.php',
method: 'GET',
success: function(data) {
// 在頁面中顯示數據
var userList = '';
data.forEach(function(user) {
userList += '<li>' + user.name + '</li>';
});
$('#user-list').html(userList);
}
});
</script>
</body>
</html>在以上代碼中，我們引入了 jQuery 庫來簡化 AJAX 的使用。通過調用$.ajax()方法，并指定后端接口的 URL 和請求方法為 GET，我們可以發送一個 AJAX 請求來獲取數據庫數據。一旦請求成功，我們將使用返回的數據更新頁面中的用戶列表。
總結來說，使用 AJAX 獲取數據庫數據可以使我們的頁面變得更加動態和快速響應。通過在后端創建一個數據庫接口，并在前端通過 AJAX 進行數據獲取和更新，我們可以輕松地將數據庫數據展示在我們的頁面上，提升用戶體驗。