jQuery的Ajax函数$.ajax()是一个非常方便的工具，可以在网页中实现搜索功能。通过Ajax技术，我们可以在不刷新整个页面的情况下，向服务器发送请求，并将返回的数据显示在页面上。本文将介绍如何使用$.ajax()来实现分类搜索功能。

假如我们有一个商品展示网站，我们需要实现一个搜索框，用户可以根据商品分类进行搜索。用户选择好分类后，点击搜索按钮，在页面上显示出该分类下的商品列表。在这个简单的例子中，我们需要三个主要组件：一个显示分类选项的下拉列表、一个搜索输入框和一个显示搜索结果的区域。我们通过$.ajax()来实现这个功能。

首先，我们需要获取分类选项的数据。我们可以通过一个Ajax请求从服务器获取这些数据。以下是一个例子：

$.ajax({
url: 'getCategories.php',
type: 'GET',
dataType: 'json',
success: function(categories) {
// 将获取到的分类数据循环添加到下拉列表中
$.each(categories, function(index, category) {
$('select').append('' + category.name + '');
});
},
error: function() {
console.log('获取分类数据失败');
}
});

在上面的例子中，我们发送一个GET请求到服务器上的getCategories.php文件，并期望返回一个JSON格式的数据。当请求成功时，我们通过$.each()循环将获取到的分类数据添加到下拉列表中。

接下来，我们需要监听搜索按钮的点击事件，以便在用户点击搜索按钮时触发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) {
// 将搜索结果显示在页面中
$('.search-results').empty();
$.each(results, function(index, result) {
$('.search-results').append('
' + result.name + '
');
});
},
error: function() {
console.log('搜索失败');
}
});
});

在上面的例子中，我们首先获取用户选择的分类和输入的搜索关键字。然后，我们使用这些值作为参数发送一个GET请求到服务器上的search.php文件，并期望返回一个JSON格式的数据。当请求成功时，我们将搜索结果循环添加到页面中的.search-results元素中。

通过上面的例子，我们成功实现了分类搜索功能。当用户选择了某个分类并输入了搜索关键字后，点击搜索按钮，页面会显示出该分类下符合搜索条件的商品列表。我们通过$.ajax()函数与服务器进行了通信，并根据返回的数据来更新页面内容。这种方法不仅提高了用户体验，还减少了对服务器资源的开销。