利用HTML讀取數據庫之技巧與方法

2024-04-11 20:41:03 前端筆記 71

為了使用 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 調用向文件發送請求，后者從數據庫檢索客戶數據。響應作為 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 連接持續發送數據。

使用 JSON 響應

無論使用 AJAX 還是 Web Sockets，使用 JSON 作為響應格式是一個明智的選擇。JSON 是一種輕量級的文本格式，便于解析和處理客戶端端。服務器端代碼應將數據庫數據轉換為 JSON 對象，然后將其作為響應返回。

實戰案例

任務：創建一個用戶列表頁面，該頁面從數據庫動態獲取用戶數據并顯示。

步驟：

<?php
$servername = "localhost";
$username = "root";
$password = "";
$dbname = "myDB";

// 創建連接
$conn = new <a style='color:#f60; text-decoration:underline;' href="/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 頁面中創建函數以顯示用戶數據。

通過遵循這些步驟，你將創建出利用 HTML 從數據庫動態讀取數據的用戶列表頁面。

猜您喜歡的源碼 帝國CMS系統下載模板，系統下載源碼，win10模板，手機端數據同步插件

帝國CMS簡潔大方系統下載模板，系統下載源碼，win10模板，帶手機同步插件