Ajax實(shí)現(xiàn)搜索顯示列表 在現(xiàn)代Web開(kāi)發(fā)中，動(dòng)態(tài)搜索框非常常見(jiàn)，用戶在輸入框中輸入關(guān)鍵字時(shí)，頁(yè)面會(huì)實(shí)時(shí)地顯示相關(guān)的搜索結(jié)果。這種實(shí)時(shí)搜索顯示列表的功能可以通過(guò)Ajax技術(shù)來(lái)實(shí)現(xiàn)。Ajax能夠在不刷新整個(gè)頁(yè)面的情況下，向服務(wù)器發(fā)送請(qǐng)求并獲取數(shù)據(jù)，然后將數(shù)據(jù)插入到頁(yè)面中的指定位置。本文將介紹如何使用Ajax來(lái)實(shí)現(xiàn)搜索顯示列表的功能。 假設(shè)我們正在開(kāi)發(fā)一個(gè)電影網(wǎng)站，在網(wǎng)站的首頁(yè)上有一個(gè)搜索框，用戶可以通過(guò)輸入電影名稱來(lái)搜索相關(guān)的電影信息。當(dāng)用戶在搜索框中輸入關(guān)鍵字時(shí)，頁(yè)面會(huì)實(shí)時(shí)地顯示與該關(guān)鍵字相關(guān)的電影名稱。我們可以使用Ajax來(lái)實(shí)現(xiàn)這個(gè)功能。 首先，我們需要編寫一個(gè)JavaScript函數(shù)，用來(lái)處理搜索框中輸入的關(guān)鍵字，并向服務(wù)器發(fā)送Ajax請(qǐng)求。以下是一個(gè)示例的JavaScript代碼：

function searchMovies(keyword) {
// 創(chuàng)建一個(gè)新的XMLHttpRequest對(duì)象
var xhr = new XMLHttpRequest();
// 定義請(qǐng)求的URL
var url = "search.php?keyword=" + encodeURIComponent(keyword);
// 設(shè)置回調(diào)函數(shù)，當(dāng)服務(wù)器返回響應(yīng)時(shí)觸發(fā)
xhr.onreadystatechange = function() {
if (xhr.readyState == 4 && xhr.status == 200) {
// 處理服務(wù)器返回的數(shù)據(jù)
var response = JSON.parse(xhr.responseText);
displayMovies(response);
}
};
// 發(fā)送Ajax請(qǐng)求
xhr.open("GET", url, true);
xhr.send();
}

在上述代碼中，我們首先通過(guò)創(chuàng)建一個(gè)XMLHttpRequest對(duì)象來(lái)發(fā)送Ajax請(qǐng)求。然后，我們定義了請(qǐng)求的URL，其中將關(guān)鍵字通過(guò)encodeURIComponent函數(shù)進(jìn)行編碼，以確保傳遞給服務(wù)器的關(guān)鍵字是安全的。我們還設(shè)置了一個(gè)回調(diào)函數(shù)，當(dāng)服務(wù)器返回響應(yīng)時(shí)將會(huì)觸發(fā)該函數(shù)。在回調(diào)函數(shù)中，我們解析服務(wù)器返回的JSON數(shù)據(jù)，并調(diào)用displayMovies函數(shù)來(lái)將電影列表顯示在頁(yè)面中。 接下來(lái)，我們需要編寫一個(gè)服務(wù)器端的腳本來(lái)處理搜索請(qǐng)求，并返回相關(guān)的電影信息。以下是一個(gè)簡(jiǎn)化的示例的PHP代碼：

在上述代碼中，我們首先獲取了Ajax請(qǐng)求中傳遞的關(guān)鍵字。然后，我們根據(jù)關(guān)鍵字執(zhí)行數(shù)據(jù)庫(kù)查詢等相關(guān)操作，獲取相關(guān)的電影信息。最后，我們將查詢結(jié)果轉(zhuǎn)換為JSON格式，并輸出給客戶端。 當(dāng)用戶在搜索框中輸入關(guān)鍵字時(shí)，我們可以使用以下的HTML代碼來(lái)調(diào)用JavaScript函數(shù)：

在上述代碼中，我們?yōu)樗阉骺蛱砑恿艘粋€(gè)onkeyup事件監(jiān)聽(tīng)器，每次鍵入一個(gè)字符時(shí)，會(huì)調(diào)用searchMovies函數(shù)，并將當(dāng)前輸入框的值作為參數(shù)傳遞給該函數(shù)。我們還使用一個(gè)div元素作為電影列表的容器，并給它一個(gè)唯一的id（movies-list）。 最后，我們需要編寫一個(gè)JavaScript函數(shù)來(lái)將電影列表顯示在頁(yè)面中。以下是一個(gè)示例的JavaScript代碼：

function displayMovies(movies) {
var moviesList = document.getElementById("movies-list");
var html = "";
for (var i = 0; i< movies.length; i++) {
html += "
" + movies[i].name + "
";
}
moviesList.innerHTML = html;
}

在上述代碼中，我們首先使用getElementById方法獲取到電影列表的容器元素。然后，我們使用一個(gè)for循環(huán)來(lái)遍歷電影數(shù)組，并將每個(gè)電影的名稱添加到一個(gè)字符串變量中。最后，我們將這個(gè)字符串變量賦值給電影列表元素的innerHTML屬性，從而將電影列表顯示在頁(yè)面中。 通過(guò)上述的代碼，我們成功地實(shí)現(xiàn)了使用Ajax來(lái)實(shí)現(xiàn)搜索顯示列表的功能。用戶在搜索框中輸入關(guān)鍵字時(shí)，頁(yè)面會(huì)實(shí)時(shí)地顯示與該關(guān)鍵字相關(guān)的電影名稱。我們可以根據(jù)具體的需求，進(jìn)一步擴(kuò)展和優(yōu)化這個(gè)功能，例如添加搜索結(jié)果的點(diǎn)擊事件，使用戶能夠點(diǎn)擊電影名稱后跳轉(zhuǎn)到電影詳情頁(yè)等等。