為了使用 html 從數(shù)據(jù)庫讀取數(shù)據(jù)，有幾種方法：使用 ajax 調(diào)用，通過異步通信以無縫方式檢索數(shù)據(jù)；使用 websockets，建立持久連接以實(shí)現(xiàn)實(shí)時數(shù)據(jù)傳輸；并且將響應(yīng)格式化為 json，以便輕松客戶端解析和處理。
利用 HTML 讀取數(shù)據(jù)庫：技巧與方法
簡介
在 Web 應(yīng)用程序中，從數(shù)據(jù)庫讀取數(shù)據(jù)是至關(guān)重要的任務(wù)。利用 HTML 作為客戶端語言，我們可以輕松地與數(shù)據(jù)庫交互并動態(tài)顯示數(shù)據(jù)。本文介紹了幾種有效的技巧和方法，幫助你有效地使用 HTML 讀取數(shù)據(jù)庫。
AJAX 調(diào)用
AJAX (Asynchronous JavaScript and XML) 允許你在不重新加載整個頁面的情況下，與服務(wù)器進(jìn)行異步通信。這使得從數(shù)據(jù)庫讀取數(shù)據(jù)變得高效且無縫。以下是使用 AJAX 調(diào)用讀取數(shù)據(jù)的代碼示例：
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();
}
登錄后復(fù)制
此函數(shù)通過 AJAX 調(diào)用向 get_customers.php 文件發(fā)送請求，后者從數(shù)據(jù)庫檢索客戶數(shù)據(jù)。響應(yīng)作為 JSON 格式返回，并在客戶端解析和顯示。
Web Sockets
Web Sockets 是另一種實(shí)現(xiàn)實(shí)時通信的強(qiáng)大技術(shù)。它允許客戶端與服務(wù)器建立持久連接，從而可以持續(xù)讀取數(shù)據(jù)庫數(shù)據(jù)。以下是用 WebSocket 讀取數(shù)據(jù)庫數(shù)據(jù)的示例代碼：
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);
}
};
登錄后復(fù)制
此代碼使用 WebSocket 對象連接到服務(wù)器，并發(fā)送一條消息以檢索客戶數(shù)據(jù)。服務(wù)器處理該請求并通過 WebSocket 連接持續(xù)發(fā)送數(shù)據(jù)。
使用 JSON 響應(yīng)
無論使用 AJAX 還是 Web Sockets，使用 JSON 作為響應(yīng)格式是一個明智的選擇。JSON 是一種輕量級的文本格式，便于解析和處理客戶端端。服務(wù)器端代碼應(yīng)將數(shù)據(jù)庫數(shù)據(jù)轉(zhuǎn)換為 JSON 對象，然后將其作為響應(yīng)返回。
實(shí)戰(zhàn)案例
任務(wù)：創(chuàng)建一個用戶列表頁面，該頁面從數(shù)據(jù)庫動態(tài)獲取用戶數(shù)據(jù)并顯示。
步驟：
- 創(chuàng)建一個
get_users.php 文件，該文件用于從數(shù)據(jù)庫中獲取用戶數(shù)據(jù)并將其編碼為 JSON：<?php
$servername = "localhost";
$username = "root";
$password = "";
$dbname = "myDB";
// 創(chuàng)建連接
$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);
// 準(zhǔn)備和執(zhí)行查詢
$sql = "SELECT * FROM users";
$result = $conn->query($sql);
// 將結(jié)果編碼為 JSON
$users = array();
while ($row = $result->fetch_assoc()) {
$users[] = $row;
}
echo json_encode($users);
?>
登錄后復(fù)制
- 在 HTML 頁面中使用 AJAX 調(diào)用檢索用戶數(shù)據(jù)并將其顯示：
<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>
登錄后復(fù)制
- 在 HTML 頁面中創(chuàng)建
displayUsers() 函數(shù)以顯示用戶數(shù)據(jù)。通過遵循這些步驟，你將創(chuàng)建出利用 HTML 從數(shù)據(jù)庫動態(tài)讀取數(shù)據(jù)的用戶列表頁面。
