>  기사  >  웹 프론트엔드  >  HTML이 데이터베이스를 읽는 방법에 대한 심층 분석

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

王林
王林원래의
2024-04-09 12:36:02564검색

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

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 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명:
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.