HTML 與資料庫查詢相輔相成，賦能建立互動式且資料驅動的 Web 應用程式：HTML 表單處理：收集使用者輸入並從資料庫檢索數據，回應使用者操作。 AJAX 資料請求：非同步傳送資料庫查詢，不重新整理頁面，更新資料。資料庫驅動的搜尋功能：使用者輸入查詢，應用程式使用 SQL 查詢資料庫傳回相關結果。
HTML 與資料庫查詢的協同效應
引言
HTML 和資料庫查詢相輔相成，幫助我們建立互動式且資料驅動的Web 應用程式。本文將探討如何將 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]);
?>結論
#HTML 與資料庫查詢共同作用，提供建立互動式且資料驅動的Web 應用程式的強大工具。透過整合這些技術，我們可以建立動態和互動式頁面，這些頁面可以從資料庫中取得、處理和顯示資料。
以上是HTML與資料庫查詢的協同效應的詳細內容。更多資訊請關注PHP中文網其他相關文章！
