首頁 > web前端 > html教學 > 利用HTML讀取資料庫之技巧與方法

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

PHPz
發布: 2024-04-09 13:45:01
原創
810 人瀏覽過

為了使用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 對象,然後將其作為回應返回。

實戰案例

任務:建立一個使用者清單頁面,該頁面從資料庫動態取得使用者資料並顯示。

步驟:

  1. 建立一個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);
?>
登入後複製
  1. 在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>
登入後複製
  1. 在HTML 頁面中建立displayUsers() 函數以顯示使用者資料。

透過遵循這些步驟,你將會建立出利用 HTML 從資料庫動態讀取資料的使用者清單頁面。

以上是利用HTML讀取資料庫之技巧與方法的詳細內容。更多資訊請關注PHP中文網其他相關文章!

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板