利用HTML讀取資料庫之技巧與方法-html教學-PHP中文網

利用HTML讀取資料庫之技巧與方法

PHPz

發布： 2024-04-09 13:45:01

原創

838 人瀏覽過

為了使用HTML 從資料庫讀取數據，有幾種方法：使用AJAX 調用，透過非同步通訊以無縫方式檢索資料；使用WebSockets，建立持久連接以實現即時資料傳輸；並且將回應格式化為JSON ，以便輕鬆客戶端解析和處理。

利用HTML讀取資料庫之技巧與方法

利用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 mysqli($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>

登入後複製