深入解析HTML如何讀取資料庫

HTML 無法直接讀取資料庫，但可以透過 JavaScript 和 AJAX 實作。其步驟包括建立資料庫連線、發送查詢、處理回應和更新頁面。本文提供了利用 JavaScript、AJAX 和 PHP 來從 MySQL 資料庫讀取資料的實戰範例，展示如何在 HTML 頁面中動態顯示查詢結果。此範例使用 XMLHttpRequest 建立資料庫連接，發送查詢並處理回應，從而將資料填入頁面元素中，實現了 HTML 讀取資料庫的功能。

深入解析HTML 如何讀取資料庫

前言

在現代Web在應用程式中，讀取資料庫是至關重要的，它能讓我們從資料庫中提取資料並將其展示給使用者。 HTML 本身並不能直接連接到資料庫，但我們可以利用 JavaScript 和 AJAX 技術來實現這項功能。本文將深入探討 HTML 如何透過 JavaScript 和 AJAX 讀取資料庫，並透過範例進行解說。

JavaScript 和 AJAX

JavaScript 是一種腳本語言，它可以動態地修改網頁內容和行為。 AJAX（非同步 JavaScript 和 XML）是一種技術，它允許 JavaScript 在不重新載入整個頁面的情況下與伺服器進行通訊。使用 AJAX，我們可以在後台從資料庫中取得數據，然後更新頁面內容。

步驟

讀取資料庫涉及以下步驟：

1. #建立資料庫連線：使用JavaScript 建立到資料庫（如MySQL 或PostgreSQL）的連接。
2. 傳送查詢：透過 JavaScript 編寫並傳送 SQL 查詢以取得資料。
3. 處理回應：接收並解析來自資料庫的回應，提取所需資料。
4. 更新頁面：使用 JavaScript 動態更新網頁內容，顯示從資料庫取得的資料。

實戰案例

下面是用HTML、JavaScript 和AJAX 來讀取MySQL 資料庫的範例：

##HTML

<div id="data-container"></div>

<script>
// 获取数据容器元素
const dataContainer = document.getElementById("data-container");

// 数据库连接信息
const dbHost = "localhost";
const dbName = "mydb";
const dbUser = "root";
const dbPass = "root";

// 建立数据库连接
const conn = new XMLHttpRequest();
conn.open("GET", `php/connect_db.php?host=${dbHost}&name=${dbName}&user=${dbUser}&pass=${dbPass}`);
conn.send();

// 监听数据库连接响应
conn.onreadystatechange = function() {
  if (this.readyState == 4 && this.status == 200) {
    // 数据库连接成功，发送查询
    const query = "SELECT * FROM users";
    const queryRequest = new XMLHttpRequest();
    queryRequest.open("POST", `php/query_db.php?query=${query}`);
    queryRequest.send();

    // 监听查询响应
    queryRequest.onreadystatechange = function() {
      if (this.readyState == 4 && this.status == 200) {
        // 查询成功，获取响应
        const data = JSON.parse(this.responseText);

        // 遍历数据并填充数据容器
        for (let i = 0; i < data.length; i++) {
          dataContainer.appendChild(document.createElement("p")).textContent = `Name: ${data[i].name}, Age: ${data[i].age}`;
        }
      }
    };
  }
};
</script>

PHP（用於資料庫連接和查詢）

#connect_db.php

<?php
// 数据库连接信息
$dbHost = $_GET['host'];
$dbName = $_GET['name'];
$dbUser = $_GET['user'];
$dbPass = $_GET['pass'];

// 建立数据库连接
$conn = new mysqli($dbHost, $dbUser, $dbPass, $dbName);
if ($conn->connect_error) {
  die("数据库连接失败: " . $conn->connect_error);
}

# query_db.php

<?php
include 'connect_db.php';

// 获取查询字符串
$query = $_GET['query'];

// 执行查询
$result = $conn->query($query);
if (!$result) {
  die("查询失败: " . $conn->error);
}

// 将查询结果编码为 JSON 格式
$data = json_encode($result->fetch_all(MYSQLI_ASSOC));

// 返回 JSON 数据
echo $data;

效果

#在瀏覽器中開啟包含上述程式碼的HTML 文件，它將自動查詢資料庫並使用AJAX 從PHP 腳本中獲取響應。從資料庫中取得的資料將填入 "data-container" 元素中，在頁面上即時顯示查詢結果。

以上是深入解析HTML如何讀取資料庫的詳細內容。更多資訊請關注PHP中文網其他相關文章！