為了使用 html 從數據庫讀取數據，有幾種方法：使用 ajax 調用，通過異步通信以無縫方式檢索數據；使用 websockets，建立持久連接以實現實時數據傳輸；并且將響應格式化為 json，以便輕松客戶端解析和處理。
利用 HTML 讀取數據庫：技巧與方法
簡介
在 Web 應用程序中，從數據庫讀取數據是至關重要的任務。利用 HTML 作為客戶端語言，我們可以輕松地與數據庫交互并動態顯示數據。本文介紹了幾種有效的技巧和方法，幫助你有效地使用 HTML 讀取數據庫。
AJAX 調用
AJAX (Asynchronous JavaScript and XML) 允許你在不重新加載整個頁面的情況下，與服務器進行異步通信。這使得從數據庫讀取數據變得高效且無縫。以下是使用 AJAX 調用讀取數據的代碼示例：
function getCustomers() {
var xhr = new XMLHttpRequest();
xhr.open("GET", "get_customers.php");
xhr.onload = function() {
if (xhr.status === 200) {
var customers = JSON.parse(xhr.responseText);
displayCustomers(customers);
} else {
alert("Error fetching customers.");
}
};
xhr.send();
}
登錄后復制
此函數通過 AJAX 調用向 get_customers.php 文件發送請求，后者從數據庫檢索客戶數據。響應作為 JSON 格式返回，并在客戶端解析和顯示。
Web Sockets
Web Sockets 是另一種實現實時通信的強大技術。它允許客戶端與服務器建立持久連接，從而可以持續讀取數據庫數據。以下是用 WebSocket 讀取數據庫數據的示例代碼：
var websocket = new WebSocket("ws://localhost:8080");
websocket.onopen = function() {
websocket.send("get_customers");
};
websocket.onmessage = function(event) {
var data = JSON.parse(event.data);
if (data.type == "customers") {
displayCustomers(data.customers);
}
};
登錄后復制
此代碼使用 WebSocket 對象連接到服務器，并發送一條消息以檢索客戶數據。服務器處理該請求并通過 WebSocket 連接持續發送數據。
使用 JSON 響應
無論使用 AJAX 還是 Web Sockets，使用 JSON 作為響應格式是一個明智的選擇。JSON 是一種輕量級的文本格式，便于解析和處理客戶端端。服務器端代碼應將數據庫數據轉換為 JSON 對象，然后將其作為響應返回。
實戰案例
任務：創建一個用戶列表頁面，該頁面從數據庫動態獲取用戶數據并顯示。
步驟：
- 創建一個
get_users.php 文件，該文件用于從數據庫中獲取用戶數據并將其編碼為 JSON：<?php
$servername = "localhost";
$username = "root";
$password = "";
$dbname = "myDB";
// 創建連接
$conn = new <a style='color:#f60; text-decoration:underline;' href="https://www.php.cn/zt/15713.html" target="_blank">mysql</a>i($servername, $username, $password, $dbname);
// 準備和執行查詢
$sql = "SELECT * FROM users";
$result = $conn->query($sql);
// 將結果編碼為 JSON
$users = array();
while ($row = $result->fetch_assoc()) {
$users[] = $row;
}
echo json_encode($users);
?>
登錄后復制
- 在 HTML 頁面中使用 AJAX 調用檢索用戶數據并將其顯示：
<script>
function getUsers() {
var xhr = new XMLHttpRequest();
xhr.open("GET", "get_users.php");
xhr.onload = function() {
if (xhr.status === 200) {
var users = JSON.parse(xhr.responseText);
displayUsers(users);
} else {
alert("Error fetching users.");
}
};
xhr.send();
}
</script>
<body onload="getUsers()">
<div id="user-list"></div>
</body>
登錄后復制
- 在 HTML 頁面中創建
displayUsers() 函數以顯示用戶數據。通過遵循這些步驟，你將創建出利用 HTML 從數據庫動態讀取數據的用戶列表頁面。
