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 <a style='color:#f60; text-decoration:underline;' href="https://www.php.cn/zt/15713.html" target="_blank">mysql</a>i('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 應用程序的強大工具。通過整合這些技術，我們可以創建動態和交互式頁面，這些頁面可以從數據庫中獲取、處理和顯示數據。
