深入解析HTML如何读取数据库

HTML tidak boleh membaca pangkalan data secara langsung, tetapi ia boleh dicapai melalui JavaScript dan AJAX. Langkah-langkah termasuk mewujudkan sambungan pangkalan data, menghantar pertanyaan, memproses respons dan mengemas kini halaman. Artikel ini menyediakan contoh praktikal menggunakan JavaScript, AJAX dan PHP untuk membaca data daripada pangkalan data MySQL, menunjukkan cara untuk memaparkan hasil pertanyaan secara dinamik dalam halaman HTML. Contoh ini menggunakan XMLHttpRequest untuk mewujudkan sambungan pangkalan data, menghantar pertanyaan dan memproses respons, dengan itu mengisi data ke dalam elemen halaman dan merealisasikan fungsi HTML membaca pangkalan data.

Analisis HTML yang mendalam Cara membaca pangkalan data

Kata Pengantar

Dalam aplikasi web moden, membaca pangkalan data adalah penting, yang membolehkan kami mengekstrak data daripada pangkalan data dan memaparkannya kepada pengguna . HTML sendiri tidak boleh menyambung terus ke pangkalan data, tetapi kami boleh menggunakan teknologi JavaScript dan AJAX untuk mencapai fungsi ini. Artikel ini mendalami cara HTML membaca pangkalan data melalui JavaScript dan AJAX, dan menerangkannya dengan contoh.

JavaScript dan AJAX

JavaScript ialah bahasa skrip yang boleh mengubah suai kandungan dan tingkah laku halaman web secara dinamik. AJAX (Asynchronous JavaScript and XML) ialah teknologi yang membolehkan JavaScript berkomunikasi dengan pelayan tanpa memuatkan semula keseluruhan halaman. Menggunakan AJAX, kami boleh mengambil data daripada pangkalan data di latar belakang dan kemudian mengemas kini kandungan halaman.

Langkah

Membaca pangkalan data melibatkan langkah berikut:

1. Mewujudkan sambungan pangkalan data: Gunakan JavaScript untuk mewujudkan sambungan ke pangkalan data seperti MySQL atau PostgreSQL.
2. Hantar Pertanyaan: Tulis dan hantar pertanyaan SQL melalui JavaScript untuk mendapatkan data.
3. Memproses respons: Terima dan menghuraikan respons daripada pangkalan data, ekstrak data yang diperlukan.
4. Kemas kini halaman: Gunakan JavaScript untuk mengemas kini kandungan halaman web secara dinamik dan memaparkan data yang diperoleh daripada pangkalan data.

Kes praktikal

Berikut ialah contoh penggunaan HTML, JavaScript dan AJAX untuk membaca pangkalan data 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 (untuk sambungan pangkalan data dan pertanyaan

)

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

Buka fail HTML yang mengandungi kod di atas dalam pelayar anda, ia secara automatik akan menanyakan pangkalan data dan mendapat respons daripada skrip PHP menggunakan AJAX. Data yang diperoleh daripada pangkalan data akan diisikan ke dalam elemen "bekas data", dan hasil pertanyaan akan dipaparkan pada halaman dalam masa nyata.

Atas ialah kandungan terperinci 深入解析HTML如何读取数据库. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!