Ajax（Asynchronous JavaScript and XML）是一種用于創(chuàng)建動(dòng)態(tài)網(wǎng)頁的技術(shù)，可實(shí)現(xiàn)在不重新加載整個(gè)頁面的情況下刷新特定部分的內(nèi)容。它可以實(shí)現(xiàn)搜索關(guān)鍵字的實(shí)時(shí)刷新，讓用戶獲得更好的搜索體驗(yàn)。例如，當(dāng)用戶在搜索框中輸入關(guān)鍵字時(shí)，網(wǎng)頁會(huì)自動(dòng)顯示相關(guān)的搜索結(jié)果，而不需要用戶手動(dòng)點(diǎn)擊搜索按鈕。本文將介紹如何使用Ajax實(shí)現(xiàn)搜索關(guān)鍵字的實(shí)時(shí)刷新。
要使用Ajax實(shí)現(xiàn)搜索關(guān)鍵字的實(shí)時(shí)刷新，首先需要一個(gè)包含搜索框和搜索結(jié)果的網(wǎng)頁。例如，考慮一個(gè)名為“search.html”的網(wǎng)頁，其中包含一個(gè)用于輸入關(guān)鍵字的文本框和一個(gè)用于顯示搜索結(jié)果的區(qū)域。當(dāng)用戶在文本框中輸入關(guān)鍵字時(shí)，Ajax將發(fā)送一個(gè)異步請(qǐng)求到服務(wù)器，并將服務(wù)器返回的結(jié)果顯示在搜索結(jié)果區(qū)域中，實(shí)現(xiàn)實(shí)時(shí)刷新。
<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="輸入關(guān)鍵字">
<div id="searchResults"></div>
</body>
</html>在上面的示例代碼中，我們使用了jQuery庫(kù)來簡(jiǎn)化Ajax請(qǐng)求的操作。當(dāng)文本框中的關(guān)鍵字發(fā)生變化時(shí)，會(huì)觸發(fā)keyup事件。然后，通過Ajax發(fā)送POST請(qǐng)求到名為“search.php”的服務(wù)器端腳本，并將關(guān)鍵字作為數(shù)據(jù)發(fā)送。服務(wù)器收到請(qǐng)求后，根據(jù)關(guān)鍵字搜索相關(guān)的結(jié)果，并將結(jié)果作為響應(yīng)返回。Ajax的success回調(diào)函數(shù)接收到返回的結(jié)果后，將其插入到id為“searchResults”的元素中，實(shí)現(xiàn)搜索結(jié)果的實(shí)時(shí)刷新。
要在服務(wù)器端實(shí)現(xiàn)搜索關(guān)鍵字的功能，可以使用PHP或其他后端語言來處理Ajax請(qǐng)求。例如，考慮一個(gè)名為“search.php”的服務(wù)器端腳本，我們可以使用數(shù)據(jù)庫(kù)來存儲(chǔ)搜索關(guān)鍵字和相關(guān)結(jié)果的信息，并使用SQL查詢語句來獲取匹配的結(jié)果。然后，將查詢結(jié)果以HTML格式返回給客戶端。
<?php
// 獲取POST請(qǐng)求中的關(guān)鍵字
$keyword = $_POST["keyword"];
// 連接數(shù)據(jù)庫(kù)
$conn = mysqli_connect("localhost", "username", "password", "database");
// 執(zhí)行SQL查詢
$sql = "SELECT * FROM search_results WHERE keyword LIKE '%$keyword%'";
$result = mysqli_query($conn, $sql);
// 構(gòu)建搜索結(jié)果的HTML
$output = "";
while ($row = mysqli_fetch_assoc($result)) {
$output .= "<div class='result'>";
$output .= "<h3>" . $row["title"] . "</h3>";
$output .= "<p>" . $row["description"] . "</p>";
$output .= "</div>";
}
// 返回搜索結(jié)果
echo $output;
// 關(guān)閉數(shù)據(jù)庫(kù)連接
mysqli_close($conn);
?>在上面的示例代碼中，我們首先獲取POST請(qǐng)求中的關(guān)鍵字，并使用LIKE運(yùn)算符構(gòu)建SQL查詢語句，以獲取與關(guān)鍵字匹配的搜索結(jié)果。然后，我們使用mysqli_fetch_assoc函數(shù)從結(jié)果集中獲取每一行的數(shù)據(jù)，并逐行構(gòu)建用于顯示搜索結(jié)果的HTML。最后，將構(gòu)建的HTML返回給客戶端。
通過使用Ajax實(shí)現(xiàn)搜索關(guān)鍵字的實(shí)時(shí)刷新，用戶可以在輸入關(guān)鍵字時(shí)立即看到相關(guān)的搜索結(jié)果，無需等待整個(gè)頁面重新加載。這不僅提高了搜索的效率，還提供了更好的用戶體驗(yàn)。