Eine ausführliche Analyse, wie HTML die Datenbank liest

HTML kann die Datenbank nicht direkt lesen, dies kann jedoch über JavaScript und AJAX erreicht werden. Zu den Schritten gehören das Herstellen einer Datenbankverbindung, das Senden einer Abfrage, das Verarbeiten der Antwort und das Aktualisieren der Seite. Dieser Artikel bietet ein praktisches Beispiel für die Verwendung von JavaScript, AJAX und PHP zum Lesen von Daten aus einer MySQL-Datenbank und zeigt, wie Abfrageergebnisse dynamisch auf einer HTML-Seite angezeigt werden. In diesem Beispiel wird XMLHttpRequest verwendet, um eine Datenbankverbindung herzustellen, eine Abfrage zu senden und die Antwort zu verarbeiten. Dadurch werden Daten in Seitenelemente gefüllt und die Funktion des HTML-Lesens der Datenbank realisiert.

Eingehende Analyse von HTML So lesen Sie die Datenbank

Vorwort

In modernen Webanwendungen ist das Lesen der Datenbank von entscheidender Bedeutung, damit wir Daten aus der Datenbank extrahieren und den Benutzern anzeigen können . HTML selbst kann keine direkte Verbindung zu einer Datenbank herstellen, aber wir können JavaScript und AJAX-Technologie verwenden, um diese Funktionalität zu erreichen. Dieser Artikel befasst sich eingehend mit der Art und Weise, wie HTML eine Datenbank über JavaScript und AJAX liest, und erläutert dies anhand von Beispielen.

JavaScript und AJAX

JavaScript ist eine Skriptsprache, die den Inhalt und das Verhalten von Webseiten dynamisch ändern kann. AJAX (Asynchronous JavaScript and XML) ist eine Technologie, die es JavaScript ermöglicht, mit dem Server zu kommunizieren, ohne die gesamte Seite neu laden zu müssen. Mit AJAX können wir im Hintergrund Daten aus der Datenbank abrufen und dann den Seiteninhalt aktualisieren.

Schritte

Das Lesen einer Datenbank umfasst die folgenden Schritte:

1. Herstellen einer Datenbankverbindung: Verwenden Sie JavaScript, um eine Verbindung zu einer Datenbank wie MySQL oder PostgreSQL herzustellen.
2. Abfrage senden: Schreiben und senden Sie SQL-Abfragen über JavaScript, um Daten abzurufen.
3. Antwort verarbeiten: Empfangen und analysieren Sie die Antwort aus der Datenbank und extrahieren Sie die erforderlichen Daten.
4. Seite aktualisieren: Verwenden Sie JavaScript, um Webseiteninhalte dynamisch zu aktualisieren und aus der Datenbank erhaltene Daten anzuzeigen.

Practical Case

here ist ein Beispiel für die Verwendung von HTML, JavaScript und AJAX, um eine MySQL -Datenbank zu lesen:

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 (für Datenbankverbindungen und Abfragen)

connect_db

<?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

Effect

🎜Öffnen Sie die HTML-Datei mit dem obigen Code in Ihrem Browser. Dieser fragt automatisch die Datenbank ab und erhält die Antwort vom PHP-Skript mithilfe von AJAX. Die aus der Datenbank erhaltenen Daten werden in das Element „Datencontainer“ eingefügt und die Abfrageergebnisse werden in Echtzeit auf der Seite angezeigt. 🎜

Das obige ist der detaillierte Inhalt vonEine ausführliche Analyse, wie HTML die Datenbank liest. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!