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