Ajax（Asynchronous JavaScript and XML）是一種用于創建動態網頁的技術，可實現在不重新加載整個頁面的情況下刷新特定部分的內容。它可以實現搜索關鍵字的實時刷新，讓用戶獲得更好的搜索體驗。例如，當用戶在搜索框中輸入關鍵字時，網頁會自動顯示相關的搜索結果，而不需要用戶手動點擊搜索按鈕。本文將介紹如何使用Ajax實現搜索關鍵字的實時刷新。
要使用Ajax實現搜索關鍵字的實時刷新，首先需要一個包含搜索框和搜索結果的網頁。例如，考慮一個名為“search.html”的網頁，其中包含一個用于輸入關鍵字的文本框和一個用于顯示搜索結果的區域。當用戶在文本框中輸入關鍵字時，Ajax將發送一個異步請求到服務器，并將服務器返回的結果顯示在搜索結果區域中，實現實時刷新。
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("#keyword").keyup(function(){
var keyword = $(this).val();
$.ajax({
url: "search.php",
type: "POST",
data: {keyword: keyword},
success: function(data){
$("#searchResults").html(data);
}
});
});
});
</script>
</head>
<body>
<input type="text" id="keyword" placeholder="輸入關鍵字">
<div id="searchResults"></div>
</body>
</html>在上面的示例代碼中，我們使用了jQuery庫來簡化Ajax請求的操作。當文本框中的關鍵字發生變化時，會觸發keyup事件。然后，通過Ajax發送POST請求到名為“search.php”的服務器端腳本，并將關鍵字作為數據發送。服務器收到請求后，根據關鍵字搜索相關的結果，并將結果作為響應返回。Ajax的success回調函數接收到返回的結果后，將其插入到id為“searchResults”的元素中，實現搜索結果的實時刷新。
要在服務器端實現搜索關鍵字的功能，可以使用PHP或其他后端語言來處理Ajax請求。例如，考慮一個名為“search.php”的服務器端腳本，我們可以使用數據庫來存儲搜索關鍵字和相關結果的信息，并使用SQL查詢語句來獲取匹配的結果。然后，將查詢結果以HTML格式返回給客戶端。
<?php
// 獲取POST請求中的關鍵字
$keyword = $_POST["keyword"];
// 連接數據庫
$conn = mysqli_connect("localhost", "username", "password", "database");
// 執行SQL查詢
$sql = "SELECT * FROM search_results WHERE keyword LIKE '%$keyword%'";
$result = mysqli_query($conn, $sql);
// 構建搜索結果的HTML
$output = "";
while ($row = mysqli_fetch_assoc($result)) {
$output .= "<div class='result'>";
$output .= "<h3>" . $row["title"] . "</h3>";
$output .= "<p>" . $row["description"] . "</p>";
$output .= "</div>";
}
// 返回搜索結果
echo $output;
// 關閉數據庫連接
mysqli_close($conn);
?>在上面的示例代碼中，我們首先獲取POST請求中的關鍵字，并使用LIKE運算符構建SQL查詢語句，以獲取與關鍵字匹配的搜索結果。然后，我們使用mysqli_fetch_assoc函數從結果集中獲取每一行的數據，并逐行構建用于顯示搜索結果的HTML。最后，將構建的HTML返回給客戶端。
通過使用Ajax實現搜索關鍵字的實時刷新，用戶可以在輸入關鍵字時立即看到相關的搜索結果，無需等待整個頁面重新加載。這不僅提高了搜索的效率，還提供了更好的用戶體驗。