本文將介紹如何使用Ajax來實現頁面查詢數據庫的功能。Ajax是一種在不重新加載整個頁面的情況下，通過后臺請求數據并更新頁面的技術。通過Ajax，我們可以實現無需刷新頁面即可從數據庫中獲取數據并展示在頁面上。以下將通過具體的實例來說明如何實現這一功能。
首先，我們來創建一個簡單的表單頁面，用戶可以在該頁面上輸入關鍵字來查詢數據庫中的數據。當用戶提交表單后，我們會通過Ajax發送請求到后臺，并接收從數據庫中返回的數據。下面是HTML代碼：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>數據庫查詢頁面</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function(){
$("form").submit(function(event){
event.preventDefault(); // 阻止表單的默認提交行為
var keyword = $("#keyword").val(); // 獲取用戶輸入的關鍵字
$.ajax({
url: "query.php", // 后臺查詢數據的文件路徑
method: "POST",
data: { keyword: keyword }, // 將關鍵字作為數據發送到后臺
success: function(response){
$("#result").html(response); // 將從后臺返回的數據顯示在id為result的元素中
}
});
});
});
</script>
</head>
<body>
<form action="" method="post">
<input type="text" id="keyword" name="keyword" placeholder="輸入關鍵字">
<button type="submit">查詢</button>
</form>
<div id="result"></div>
</body>
</html>以上代碼中，我們使用了jQuery庫來簡化Ajax的操作。當用戶提交表單時，我們會阻止表單的默認提交行為，獲取用戶輸入的關鍵字，然后通過Ajax發送請求到后臺的"query.php"文件。我們將關鍵字作為數據發送到后臺，并通過一個匿名函數來處理后臺返回的數據。這個函數將把返回的數據顯示在頁面上id為"result"的元素中。
接下來，我們來編寫"query.php"文件，該文件將連接數據庫并執行查詢操作。以下是"query.php"的代碼：
<?php
$keyword = $_POST['keyword']; // 獲取從前端發送過來的關鍵字
// 連接數據庫并執行查詢操作
$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) {
// 輸出數據
while($row = $result->fetch_assoc()) {
echo "<p>" . $row["column1"]. " - " . $row["column2"]. "</p>";
}
} else {
echo "<p>沒有匹配的記錄</p>";
}
$conn->close();
?>在以上代碼中，我們首先獲取從前端發送過來的關鍵字，然后連接數據庫并執行查詢操作。查詢語句中使用了LIKE關鍵字來模糊匹配數據庫中的列。如果查詢結果有匹配的記錄，我們將遍歷每一行并輸出到頁面上。如果沒有匹配的記錄，將輸出內容為"沒有匹配的記錄"的段落。
通過以上的代碼，我們就實現了通過Ajax來實現頁面查詢數據庫的功能。用戶在輸入關鍵字后，無需刷新頁面即可獲取數據庫中的匹配記錄并展示在頁面上。這種方式可以提高用戶體驗，并且減少了對服務器資源的消耗。