HTML이 데이터베이스를 읽는 방법에 대한 심층 분석

HTML은 데이터베이스를 직접 읽을 수 없지만 JavaScript 및 AJAX를 통해 달성할 수 있습니다. 단계에는 데이터베이스 연결 설정, 쿼리 보내기, 응답 처리 및 페이지 업데이트가 포함됩니다. 이 기사에서는 JavaScript, AJAX 및 PHP를 사용하여 MySQL 데이터베이스에서 데이터를 읽는 실제 예제를 제공하고 쿼리 결과를 HTML 페이지에 동적으로 표시하는 방법을 보여줍니다. 이 예제에서는 XMLHttpRequest를 사용하여 데이터베이스 연결을 설정하고 쿼리를 보내고 응답을 처리함으로써 페이지 요소에 데이터를 채우고 데이터베이스를 읽는 HTML 기능을 실현합니다.

HTML 심층 분석 데이터베이스를 읽는 방법

머리말

현대 웹 애플리케이션에서는 데이터베이스를 읽는 것이 중요합니다. 이를 통해 데이터베이스에서 데이터를 추출하여 사용자에게 표시할 수 있습니다. . HTML 자체는 데이터베이스에 직접 연결할 수 없지만 JavaScript 및 AJAX 기술을 사용하여 이 기능을 구현할 수 있습니다. 이 기사에서는 HTML이 JavaScript 및 AJAX를 통해 데이터베이스를 읽는 방법을 자세히 살펴보고 예제를 통해 설명합니다.

JavaScript 및 AJAX

JavaScript는 웹 페이지 콘텐츠와 동작을 동적으로 수정할 수 있는 스크립팅 언어입니다. AJAX(Asynchronous JavaScript and XML)는 JavaScript가 전체 페이지를 다시 로드하지 않고도 서버와 통신할 수 있도록 하는 기술입니다. AJAX를 사용하면 백그라운드에서 데이터베이스에서 데이터를 가져온 다음 페이지 콘텐츠를 업데이트할 수 있습니다.

단계

데이터베이스 읽기에는 다음 단계가 포함됩니다.

1. 데이터베이스 연결 설정: JavaScript를 사용하여 MySQL 또는 PostgreSQL과 같은 데이터베이스에 대한 연결을 설정합니다.
2. 쿼리 보내기: JavaScript를 통해 SQL 쿼리를 작성하고 보내 데이터를 가져옵니다.
3. 응답 처리: 데이터베이스에서 응답을 수신 및 구문 분석하고 필요한 데이터를 추출합니다.
4. 업데이트 페이지: JavaScript를 사용하여 웹페이지 콘텐츠를 동적으로 업데이트하고 데이터베이스에서 얻은 데이터를 표시합니다.

실용 사례

다음은 MySQL 데이터베이스를 읽기 위해 HTML, JavaScript 및 AJAX를 사용하는 예입니다.

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
// 数据库连接信息
$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 파일을 열면 자동으로 데이터베이스에 쿼리하고 AJAX를 사용하여 PHP 스크립트에서 응답을 받습니다. 데이터베이스에서 얻은 데이터는 "data-container" 요소에 채워지고 쿼리 결과는 실시간으로 페이지에 표시됩니다.

위 내용은 HTML이 데이터베이스를 읽는 방법에 대한 심층 분석의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!