HTML を使用してデータベースを読み取るためのヒントと方法-htmlチュートリアル-php.cn

HTML を使用してデータベースを読み取るためのヒントと方法

PHPz

リリース： 2024-04-09 13:45:01

オリジナル

792 人が閲覧しました

HTML を使用してデータベースからデータを読み取るには、いくつかの方法があります: AJAX 呼び出しを使用して非同期通信を通じてシームレスな方法でデータを取得する; WebSocket を使用してリアルタイムのデータ転送のための永続的な接続を確立する; そして、応答は JSON として返され、クライアント側での解析と処理が容易になります。

HTML を使用してデータベースを読み取るためのヒントと方法

HTML を使用したデータベースの読み取り: ヒントと方法

概要

Web アプリケーションでは、データベースからのデータの読み取りは重要なタスクです。クライアント言語として HTML を使用すると、データベースと簡単に対話し、データを動的に表示できます。この記事では、HTML を効果的に使用してデータベースを読み取るための効果的なテクニックと方法をいくつか紹介します。

AJAX 呼び出し

AJAX (非同期 JavaScript および XML) を使用すると、ページ全体をリロードせずにサーバーと非同期通信できます。これにより、データベースからのデータの読み取りが効率的かつシームレスになります。以下は、AJAX 呼び出しを使用してデータを読み取るコード例です。

function getCustomers() {
  var xhr = new XMLHttpRequest();
  xhr.open("GET", "get_customers.php");
  xhr.onload = function() {
    if (xhr.status === 200) {
      var customers = JSON.parse(xhr.responseText);
      displayCustomers(customers);
    } else {
      alert("Error fetching customers.");
    }
  };
  xhr.send();
}

ログイン後にコピー

この関数は、AJAX 呼び出しを通じて get_customers.php ファイルにリクエストを送信し、ファイルから顧客データを取得します。データベース。応答は JSON 形式で返され、クライアント側で解析されて表示されます。

Web Sockets

Web Sockets は、リアルタイム通信のためのもう 1 つの強力なテクノロジです。これにより、クライアントはサーバーとの永続的な接続を確立できるため、データベースデータを継続的に読み取ることができます。以下は、WebSocket を使用してデータベースデータを読み取るサンプルコードです。

var websocket = new WebSocket("ws://localhost:8080");
websocket.onopen = function() {
  websocket.send("get_customers");
};
websocket.onmessage = function(event) {
  var data = JSON.parse(event.data);
  if (data.type == "customers") {
    displayCustomers(data.customers);
  }
};

ログイン後にコピー

このコードは、WebSocket オブジェクトを使用してサーバーに接続し、メッセージを送信して顧客データを取得します。サーバーはリクエストを処理し、WebSocket 接続経由でデータを送信し続けます。

JSON 応答の使用

AJAX を使用するか Web Sockets を使用するかにかかわらず、応答形式として JSON を使用するのが賢明な選択です。 JSON は、クライアント側で簡単に解析および処理できる軽量のテキスト形式です。サーバー側のコードはデータベースデータを JSON オブジェクトに変換し、それを応答として返す必要があります。

実践事例

タスク: データベースからユーザーデータを動的に取得して表示するユーザーリストページを作成します。

手順:

データベースからユーザーデータを取得し、JSON 用にエンコードするために使用する get_users.php ファイルを作成します。 :

<?php
$servername = "localhost";
$username = "root";
$password = "";
$dbname = "myDB";

// 创建连接
$conn = new mysqli($servername, $username, $password, $dbname);

// 准备和执行查询
$sql = "SELECT * FROM users";
$result = $conn->query($sql);

// 将结果编码为 JSON
$users = array();
while ($row = $result->fetch_assoc()) {
  $users[] = $row;
}
echo json_encode($users);
?>

ログイン後にコピー

HTML ページで AJAX 呼び出しを使用してユーザーデータを取得し、表示します:

<script>
  function getUsers() {
    var xhr = new XMLHttpRequest();
    xhr.open("GET", "get_users.php");
    xhr.onload = function() {
      if (xhr.status === 200) {
        var users = JSON.parse(xhr.responseText);
        displayUsers(users);
      } else {
        alert("Error fetching users.");
      }
    };
    xhr.send();
  }
</script>

<body onload="getUsers()">
  <div id="user-list"></div>
</body>

ログイン後にコピー