ホームページ >ウェブフロントエンド >htmlチュートリアル >HTML を使用してデータベースを読み取るためのヒントと方法
HTML を使用してデータベースを読み取るためのヒントと方法
- PHPzオリジナル
- 2024-04-09 13:45:01840ブラウズ
HTML を使用してデータベースからデータを読み取るには、いくつかの方法があります: AJAX 呼び出しを使用して非同期通信を通じてシームレスな方法でデータを取得する; WebSocket を使用してリアルタイムのデータ転送のための永続的な接続を確立する; そして、応答は JSON として返され、クライアント側での解析と処理が容易になります。
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>- HTML ページで作成
displayUsers( )ユーザーデータを表示する関数。
次の手順に従って、HTML を使用してデータベースからデータを動的に読み取るユーザー リスト ページを作成します。
以上がHTML を使用してデータベースを読み取るためのヒントと方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。