Maison >interface Web >tutoriel HTML >Conseils et méthodes pour utiliser HTML pour lire des bases de données
Conseils et méthodes pour utiliser HTML pour lire des bases de données
- PHPzoriginal
- 2024-04-09 13:45:01843parcourir
Pour lire les données d'une base de données en utilisant HTML, il existe plusieurs méthodes : utiliser des appels AJAX pour récupérer les données de manière transparente via une communication asynchrone ; utiliser des WebSockets pour établir une connexion persistante pour le transfert de données en temps réel et formater la réponse ; en tant que JSON afin de faciliter l'analyse et le traitement côté client.
Lecture de la base de données en HTML : Astuces et méthodes
Introduction
Dans les applications Web, la lecture des données de la base de données est une tâche cruciale. En utilisant HTML comme langage client, nous pouvons facilement interagir avec la base de données et afficher dynamiquement les données. Cet article présente plusieurs techniques et méthodes efficaces pour vous aider à utiliser efficacement HTML pour lire des bases de données.
Appels AJAX
AJAX (Asynchronous JavaScript and XML) vous permet de communiquer de manière asynchrone avec le serveur sans recharger la page entière. Cela rend la lecture des données de la base de données efficace et transparente. Voici un exemple de code qui utilise un appel AJAX pour lire des données :
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();
}Cette fonction envoie une requête via un appel AJAX au fichier get_customers.php, qui récupère les données client de la base de données. La réponse est renvoyée au format JSON, analysée et affichée côté client. get_customers.php 文件发送请求，后者从数据库检索客户数据。响应作为 JSON 格式返回，并在客户端解析和显示。
Web Sockets
Web Sockets 是另一种实现实时通信的强大技术。它允许客户端与服务器建立持久连接，从而可以持续读取数据库数据。以下是用 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 对象，然后将其作为响应返回。
实战案例
任务：创建一个用户列表页面，该页面从数据库动态获取用户数据并显示。
步骤：
- 创建一个
get_users.php文件，该文件用于从数据库中获取用户数据并将其编码为 JSON：
<?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()
WebSocket pour se connecter au serveur et envoyer un message pour récupérer les données client. Le serveur gère la demande et continue d'envoyer les données via la connexion WebSocket. 🎜🎜🎜Utilisez les réponses JSON 🎜🎜🎜 Que vous utilisiez AJAX ou Web Sockets, utiliser JSON comme format de réponse est un choix judicieux. JSON est un format de texte léger, facile à analyser et à traiter côté client. Le code côté serveur doit convertir les données de la base de données en un objet JSON et les renvoyer en réponse. 🎜🎜🎜Cas pratique🎜🎜🎜🎜Tâche : 🎜Créer une page de liste d'utilisateurs qui obtient dynamiquement les données utilisateur de la base de données et les affiche. 🎜🎜🎜Étapes : 🎜🎜- Créez un fichier
get_users.phputilisé pour obtenir les données utilisateur de la base de données et encodez-les en JSON : 🎜🎜rrreee- Utilisez les appels AJAX dans la page HTML pour récupérer les données utilisateur et les afficher : 🎜🎜rrreee
- Créez
displayUsers() dans le code de la page HTML> fonction pour afficher les données utilisateur. 🎜🎜🎜En suivant ces étapes, vous créerez une page de liste d'utilisateurs qui utilise HTML pour lire dynamiquement les données d'une base de données. 🎜
- Créez
- Utilisez les appels AJAX dans la page HTML pour récupérer les données utilisateur et les afficher : 🎜🎜rrreee
Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!