HTML을 사용하여 데이터베이스를 읽는 팁과 방법
- PHPz원래의
- 2024-04-09 13:45:01714검색
HTML을 사용하여 데이터베이스에서 데이터를 읽으려면 여러 가지 방법이 있습니다. AJAX 호출을 사용하여 비동기 통신을 통해 원활한 방식으로 데이터를 검색하고, WebSocket을 사용하여 실시간 데이터 전송을 위한 영구 연결을 설정하고 응답 형식을 지정합니다. 클라이언트 측 구문 분석 및 처리가 용이하도록 JSON으로 사용됩니다.
HTML을 사용하여 데이터베이스 읽기: 팁 및 방법
소개
웹 애플리케이션에서 데이터베이스에서 데이터를 읽는 것은 중요한 작업입니다. 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 형식으로 반환되고 구문 분석되어 클라이언트 측에 표시됩니다. 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 개체를 사용하여 서버에 연결하고 메시지를 보내 고객 데이터를 검색합니다. 서버는 요청을 처리하고 WebSocket 연결을 통해 데이터를 계속 보냅니다. 🎜🎜🎜JSON 응답 사용🎜🎜🎜AJAX를 사용하든 웹 소켓을 사용하든 JSON을 응답 형식으로 사용하는 것이 현명한 선택입니다. JSON은 클라이언트 측에서 쉽게 구문 분석하고 처리할 수 있는 경량 텍스트 형식입니다. 서버 측 코드는 데이터베이스 데이터를 JSON 개체로 변환하고 이를 응답으로 반환해야 합니다. 🎜🎜🎜실제 사례🎜🎜🎜🎜작업: 🎜데이터베이스에서 사용자 데이터를 동적으로 가져와 표시하는 사용자 목록 페이지를 만듭니다. 🎜🎜🎜단계: 🎜🎜- 데이터베이스에서 사용자 데이터를 가져와 JSON으로 인코딩하는 데 사용되는
get_users.php파일을 만듭니다. 🎜🎜rrreee- HTML 페이지에서 AJAX 호출을 사용하여 사용자 데이터를 검색하고 표시합니다. 🎜🎜rrreee
- HTML 페이지 코드에서
displayUsers() 생성> 사용자 데이터를 표시하는 기능입니다. 🎜🎜🎜다음 단계에 따라 HTML을 사용하여 데이터베이스에서 데이터를 동적으로 읽는 사용자 목록 페이지를 만듭니다. 🎜
- HTML 페이지 코드에서
- HTML 페이지에서 AJAX 호출을 사용하여 사용자 데이터를 검색하고 표시합니다. 🎜🎜rrreee
위 내용은 HTML을 사용하여 데이터베이스를 읽는 팁과 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!