jQuery是一種流行的JavaScript庫,它可以幫助開發者輕松地創建交互式網頁。其中一個最常見的用例是實現搜索功能,其中用戶輸入搜索詞并點擊搜索按鈕,然后在網頁中顯示相關的結果。以下是一個簡單的用jQuery實現搜索并顯示的示例:
$(document).ready(function() {
$("#search-btn").on("click", function() { //點擊搜索按鈕時執行以下代碼
var searchTerm = $("#search-term").val(); //從輸入框中獲取搜索詞
$.getJSON("search.php", { //向服務器發送GET請求,并傳遞搜索詞參數
term: searchTerm
})
.done(function(data) { //請求成功時執行以下代碼
$("#search-results").empty(); //清空之前顯示的結果
if (data.length >0) { //如果有結果
$.each(data, function(key, value) { //遍歷結果并顯示在界面上
$("#search-results").append("" + value + "");
});
} else { //如果沒有結果
$("#search-results").append("No results found.");
}
})
.fail(function() { //請求失敗時執行以下代碼
$("#search-results").empty();
$("#search-results").append("An error occurred.");
});
});
});
以上代碼使用jQuery的AJAX方法向服務器發送GET請求來獲取搜索結果。如果請求成功,它會處理服務器返回的JSON數據并將結果顯示在界面上。如果請求失敗,它會顯示錯誤信息。
此外,該示例要求用戶輸入搜索詞并將其存儲在一個變量中,然后使用該變量作為請求參數。這是因為在實際應用中,搜索詞可能會來自于一個表單元素,而不是直接寫在JavaScript代碼中。
上一篇jquery 插件編寫
下一篇jquery 插件庫