本文將介紹如何使用Ajax來(lái)實(shí)現(xiàn)頁(yè)面查詢數(shù)據(jù)庫(kù)的功能。Ajax是一種在不重新加載整個(gè)頁(yè)面的情況下，通過(guò)后臺(tái)請(qǐng)求數(shù)據(jù)并更新頁(yè)面的技術(shù)。通過(guò)Ajax，我們可以實(shí)現(xiàn)無(wú)需刷新頁(yè)面即可從數(shù)據(jù)庫(kù)中獲取數(shù)據(jù)并展示在頁(yè)面上。以下將通過(guò)具體的實(shí)例來(lái)說(shuō)明如何實(shí)現(xiàn)這一功能。
首先，我們來(lái)創(chuàng)建一個(gè)簡(jiǎn)單的表單頁(yè)面，用戶可以在該頁(yè)面上輸入關(guān)鍵字來(lái)查詢數(shù)據(jù)庫(kù)中的數(shù)據(jù)。當(dāng)用戶提交表單后，我們會(huì)通過(guò)Ajax發(fā)送請(qǐng)求到后臺(tái)，并接收從數(shù)據(jù)庫(kù)中返回的數(shù)據(jù)。下面是HTML代碼：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>數(shù)據(jù)庫(kù)查詢頁(yè)面</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function(){
$("form").submit(function(event){
event.preventDefault(); // 阻止表單的默認(rèn)提交行為
var keyword = $("#keyword").val(); // 獲取用戶輸入的關(guān)鍵字
$.ajax({
url: "query.php", // 后臺(tái)查詢數(shù)據(jù)的文件路徑
method: "POST",
data: { keyword: keyword }, // 將關(guān)鍵字作為數(shù)據(jù)發(fā)送到后臺(tái)
success: function(response){
$("#result").html(response); // 將從后臺(tái)返回的數(shù)據(jù)顯示在id為result的元素中
}
});
});
});
</script>
</head>
<body>
<form action="" method="post">
<input type="text" id="keyword" name="keyword" placeholder="輸入關(guān)鍵字">
<button type="submit">查詢</button>
</form>
<div id="result"></div>
</body>
</html>以上代碼中，我們使用了jQuery庫(kù)來(lái)簡(jiǎn)化Ajax的操作。當(dāng)用戶提交表單時(shí)，我們會(huì)阻止表單的默認(rèn)提交行為，獲取用戶輸入的關(guān)鍵字，然后通過(guò)Ajax發(fā)送請(qǐng)求到后臺(tái)的"query.php"文件。我們將關(guān)鍵字作為數(shù)據(jù)發(fā)送到后臺(tái)，并通過(guò)一個(gè)匿名函數(shù)來(lái)處理后臺(tái)返回的數(shù)據(jù)。這個(gè)函數(shù)將把返回的數(shù)據(jù)顯示在頁(yè)面上id為"result"的元素中。
接下來(lái)，我們來(lái)編寫"query.php"文件，該文件將連接數(shù)據(jù)庫(kù)并執(zhí)行查詢操作。以下是"query.php"的代碼：
<?php
$keyword = $_POST['keyword']; // 獲取從前端發(fā)送過(guò)來(lái)的關(guān)鍵字
// 連接數(shù)據(jù)庫(kù)并執(zhí)行查詢操作
$servername = "localhost";
$username = "root";
$password = "password";
$dbname = "mydatabase";
$conn = new mysqli($servername, $username, $password, $dbname);
if ($conn->connect_error) {
die("連接失敗: " . $conn->connect_error);
}
$sql = "SELECT * FROM mytable WHERE column LIKE '%$keyword%'";
$result = $conn->query($sql);
if ($result->num_rows > 0) {
// 輸出數(shù)據(jù)
while($row = $result->fetch_assoc()) {
echo "<p>" . $row["column1"]. " - " . $row["column2"]. "</p>";
}
} else {
echo "<p>沒(méi)有匹配的記錄</p>";
}
$conn->close();
?>在以上代碼中，我們首先獲取從前端發(fā)送過(guò)來(lái)的關(guān)鍵字，然后連接數(shù)據(jù)庫(kù)并執(zhí)行查詢操作。查詢語(yǔ)句中使用了LIKE關(guān)鍵字來(lái)模糊匹配數(shù)據(jù)庫(kù)中的列。如果查詢結(jié)果有匹配的記錄，我們將遍歷每一行并輸出到頁(yè)面上。如果沒(méi)有匹配的記錄，將輸出內(nèi)容為"沒(méi)有匹配的記錄"的段落。
通過(guò)以上的代碼，我們就實(shí)現(xiàn)了通過(guò)Ajax來(lái)實(shí)現(xiàn)頁(yè)面查詢數(shù)據(jù)庫(kù)的功能。用戶在輸入關(guān)鍵字后，無(wú)需刷新頁(yè)面即可獲取數(shù)據(jù)庫(kù)中的匹配記錄并展示在頁(yè)面上。這種方式可以提高用戶體驗(yàn)，并且減少了對(duì)服務(wù)器資源的消耗。