HTML과 데이터베이스 쿼리 간의 시너지 효과

HTML은 데이터베이스 쿼리를 보완하여 대화형 데이터 중심 웹 애플리케이션의 구축을 가능하게 합니다. HTML 양식 처리: 사용자 입력을 수집하고 데이터베이스에서 데이터를 검색하여 사용자 작업에 응답합니다. AJAX 데이터 요청: 데이터베이스 쿼리를 비동기적으로 보내고, 페이지를 새로 고치지 않고 데이터를 업데이트합니다. 데이터베이스 기반 검색 기능: 사용자가 쿼리를 입력하면 애플리케이션은 SQL을 사용하여 데이터베이스를 쿼리하여 관련 결과를 반환합니다.

HTML과 데이터베이스 쿼리의 시너지 효과

소개

HTML과 데이터베이스 쿼리는 서로를 보완하고 대화형 데이터 기반 웹 애플리케이션을 구축하는 데 도움이 됩니다. 이 기사에서는 HTML을 데이터베이스 쿼리와 결합하는 방법을 살펴보고 몇 가지 실제 예를 제공합니다.

1. HTML 양식 처리

HTML 양식을 사용하여 사용자 입력을 수집할 수 있습니다. PHP, Python 또는 Node.js와 같은 백엔드 언어를 사용하여 이러한 양식을 처리하고 응답으로 데이터베이스에서 필요한 데이터를 검색할 수 있습니다.

코드 예:

<!-- HTML 表单 -->
<form action="process.php" method="post">
  <input type="text" name="name" placeholder="姓名">
  <input type="email" name="email" placeholder="电子邮箱">
  <input type="submit" value="提交">
</form>

<!-- PHP 表单处理 -->
<?php
// 从表单中获取数据
$name = $_POST['name'];
$email = $_POST['email'];

// 连接数据库
$conn = new mysqli('localhost', 'root', '', 'mydb');

// 准备 SQL 查询
$stmt = $conn->prepare("SELECT * FROM users WHERE name=?");
$stmt->bind_param('s', $name);

// 执行查询并获取结果
$stmt->execute();
$result = $stmt->get_result();

// 遍历结果并显示用户数据
while ($row = $result->fetch_assoc()) {
  echo "姓名：" . $row['name'] . "<br>";
  echo "电子邮箱：" . $row['email'] . "<br>";
}
?>

2. AJAX 데이터 요청

AJAX(비동기 JavaScript 및 XML)를 사용하면 전체 페이지를 새로 고치지 않고도 데이터베이스에 쿼리를 보낼 수 있습니다. 이를 통해 사용자 경험을 방해하지 않고 데이터를 업데이트할 수 있습니다.

코드 예시:

<!-- HTML 页面 -->
<div id="data"></div>

<!-- JavaScript AJAX 调用 -->
<script>
// 创建 XMLHttpRequest 对象
var xhr = new XMLHttpRequest();

// 设置请求方法和 URL
xhr.open('GET', 'get_data.php');

// 发送请求
xhr.send();

// 处理响应
xhr.onload = function() {
  if (xhr.status == 200) {
    var data = JSON.parse(xhr.responseText);
    // 使用接收到的数据更新 HTML 元素
    document.getElementById('data').innerHTML = data.message;
  }
};
</script>

<!-- PHP 获取数据 -->
<?php
// 连接数据库
$conn = new mysqli('localhost', 'root', '', 'mydb');

// 准备 SQL 查询
$stmt = $conn->prepare("SELECT * FROM messages");

// 执行查询并获取结果
$stmt->execute();
$result = $stmt->get_result();

// 将结果编码为 JSON 并返回
$messages = [];
while ($row = $result->fetch_assoc()) {
  $messages[] = $row;
}
echo json_encode(['message' => $messages]);
?>

3. 데이터베이스 기반 검색 기능

HTML과 데이터베이스 쿼리를 결합하여 데이터베이스 기반 검색 기능을 구축할 수 있습니다. 사용자가 쿼리를 입력하면 애플리케이션은 SQL을 사용하여 데이터베이스를 쿼리하고 관련 결과를 반환합니다.

코드 예:

<!-- HTML 搜索栏 -->
<input type="text" id="search">

<!-- JavaScript 搜索处理 -->
<script>
// 获取搜索栏输入
var searchTerm = document.getElementById('search').value;

// 使用 AJAX 发送查询
var xhr = new XMLHttpRequest();
xhr.open('GET', 'search.php?q=' + searchTerm);
xhr.send();

// 处理响应
xhr.onload = function() {
  if (xhr.status == 200) {
    var results = JSON.parse(xhr.responseText);
    // 使用接收到的结果更新 HTML 元素
    // ...
  }
};
</script>

<!-- PHP 搜索 -->
<?php
// 获取搜索查询
$q = $_GET['q'];

// 连接数据库
$conn = new mysqli('localhost', 'root', '', 'mydb');

// 准备 SQL 查询
$stmt = $conn->prepare("SELECT * FROM products WHERE name LIKE ?");
$stmt->bind_param('s', $q);

// 执行查询并获取结果
$stmt->execute();
$result = $stmt->get_result();

// 将结果编码为 JSON 并返回
$products = [];
while ($row = $result->fetch_assoc()) {
  $products[] = $row;
}
echo json_encode(['results' => $products]);
?>

Conclusion

HTML은 데이터베이스 쿼리와 함께 작동하여 대화형 데이터 기반 웹 애플리케이션을 구축하기 위한 강력한 도구를 제공합니다. 이러한 기술을 통합함으로써 우리는 데이터베이스에서 데이터를 가져오고, 처리하고, 표시할 수 있는 동적 및 대화형 페이지를 만들 수 있습니다.

위 내용은 HTML과 데이터베이스 쿼리 간의 시너지 효과의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!