HTML がデータベースを読み取る方法の詳細な分析

HTML はデータベースを直接読み取ることはできませんが、JavaScript と AJAX を通じて実現できます。この手順には、データベース接続の確立、クエリの送信、応答の処理、ページの更新が含まれます。この記事では、JavaScript、AJAX、および PHP を使用して MySQL データベースからデータを読み取る実際の例を示し、クエリ結果を HTML ページに動的に表示する方法を示します。この例では、XMLHttpRequest を使用してデータベース接続を確立し、クエリを送信して応答を処理することで、ページ要素にデータを埋め込み、データベースを読み取る HTML の機能を実現します。

#HTML の詳細な分析とデータベースの読み取り方法

#はじめに

現代の Web では、アプリケーションではデータベースの読み取りが重要であり、データベースからデータを抽出してユーザーに表示できるようになります。 HTML 自体はデータベースに直接接続できませんが、JavaScript と AJAX テクノロジを使用してこの機能を実現できます。この記事では、HTML が JavaScript と AJAX を介してデータベースを読み取る方法について詳しく説明し、例を示して説明します。

JavaScript と AJAX

JavaScript は、Web ページのコンテンツと動作を動的に変更できるスクリプト言語です。 AJAX (非同期 JavaScript および XML) は、ページ全体をリロードせずに JavaScript がサーバーと通信できるようにするテクノロジーです。 AJAX を使用すると、バックグラウンドでデータベースからデータを取得し、ページのコンテンツを更新できます。

手順

データベースの読み取りには、次の手順が含まれます:

1. データベース接続の確立: JavaScript を使用して、データベース (MySQL や PostgreSQL など) に確立します。
2. クエリの送信: JavaScript を介して SQL クエリを作成して送信し、データを取得します。
3. 応答の処理: データベースから応答を受信して​​解析し、必要なデータを抽出します。
4. ページの更新: JavaScript を使用して、Web ページのコンテンツを動的に更新し、データベースから取得したデータを表示します。

実践的なケース

次に、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;

Effect

上記のコードを含む HTML ファイルをブラウザで開くと、自動的にデータベースにクエリが実行され、PHP から AJAX が使用されます。スクリプトで応答を取得します。データベースから取得したデータは「data-container」要素に入力され、クエリ結果がリアルタイムでページに表示されます。

以上がHTML がデータベースを読み取る方法の詳細な分析の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。