jQuery的Ajax函數(shù)$.ajax()是一個非常方便的工具，可以在網(wǎng)頁中實現(xiàn)搜索功能。通過Ajax技術(shù)，我們可以在不刷新整個頁面的情況下，向服務(wù)器發(fā)送請求，并將返回的數(shù)據(jù)顯示在頁面上。本文將介紹如何使用$.ajax()來實現(xiàn)分類搜索功能。

假如我們有一個商品展示網(wǎng)站，我們需要實現(xiàn)一個搜索框，用戶可以根據(jù)商品分類進(jìn)行搜索。用戶選擇好分類后，點擊搜索按鈕，在頁面上顯示出該分類下的商品列表。在這個簡單的例子中，我們需要三個主要組件：一個顯示分類選項的下拉列表、一個搜索輸入框和一個顯示搜索結(jié)果的區(qū)域。我們通過$.ajax()來實現(xiàn)這個功能。

首先，我們需要獲取分類選項的數(shù)據(jù)。我們可以通過一個Ajax請求從服務(wù)器獲取這些數(shù)據(jù)。以下是一個例子：

$.ajax({
url: 'getCategories.php',
type: 'GET',
dataType: 'json',
success: function(categories) {
// 將獲取到的分類數(shù)據(jù)循環(huán)添加到下拉列表中
$.each(categories, function(index, category) {
$('select').append('' + category.name + '');
});
},
error: function() {
console.log('獲取分類數(shù)據(jù)失敗');
}
});

在上面的例子中，我們發(fā)送一個GET請求到服務(wù)器上的getCategories.php文件，并期望返回一個JSON格式的數(shù)據(jù)。當(dāng)請求成功時，我們通過$.each()循環(huán)將獲取到的分類數(shù)據(jù)添加到下拉列表中。

接下來，我們需要監(jiān)聽搜索按鈕的點擊事件，以便在用戶點擊搜索按鈕時觸發(fā)Ajax請求。以下是一個例子：

$('button').on('click', function() {
var selectedCategoryId = $('select').val();
var searchTerm = $('input').val();
$.ajax({
url: 'search.php',
type: 'GET',
dataType: 'json',
data: {
category_id: selectedCategoryId,
search_term: searchTerm
},
success: function(results) {
// 將搜索結(jié)果顯示在頁面中
$('.search-results').empty();
$.each(results, function(index, result) {
$('.search-results').append('
' + result.name + '
');
});
},
error: function() {
console.log('搜索失敗');
}
});
});

在上面的例子中，我們首先獲取用戶選擇的分類和輸入的搜索關(guān)鍵字。然后，我們使用這些值作為參數(shù)發(fā)送一個GET請求到服務(wù)器上的search.php文件，并期望返回一個JSON格式的數(shù)據(jù)。當(dāng)請求成功時，我們將搜索結(jié)果循環(huán)添加到頁面中的.search-results元素中。

通過上面的例子，我們成功實現(xiàn)了分類搜索功能。當(dāng)用戶選擇了某個分類并輸入了搜索關(guān)鍵字后，點擊搜索按鈕，頁面會顯示出該分類下符合搜索條件的商品列表。我們通過$.ajax()函數(shù)與服務(wù)器進(jìn)行了通信，并根據(jù)返回的數(shù)據(jù)來更新頁面內(nèi)容。這種方法不僅提高了用戶體驗，還減少了對服務(wù)器資源的開銷。