> 웹 프론트엔드 > HTML 튜토리얼 > HTML과 데이터베이스 쿼리 간의 시너지 효과

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

王林
풀어 주다: 2024-04-09 14:21:01
원래의
1072명이 탐색했습니다.

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

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

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 중국어 웹사이트의 기타 관련 기사를 참조하세요!

관련 라벨:
원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿