帮我写一个jquery ajax 动态筛选条件的程序
时间: 2023-08-19 10:33:17 浏览: 118
好的,以下是一个简单的示例,用于使用jQuery和Ajax动态筛选条件。
HTML代码:
```html
<form>
<label for="category">选择分类:</label>
<select id="category" name="category">
<option value="">全部</option>
<option value="food">食品</option>
<option value="clothing">服装</option>
<option value="electronics">电子产品</option>
</select>
<br><br>
<label for="price">选择价格范围:</label>
<select id="price" name="price">
<option value="">全部</option>
<option value="0-50">0-50元</option>
<option value="50-100">50-100元</option>
<option value="100-200">100-200元</option>
<option value="200+">200元以上</option>
</select>
</form>
<div id="result"></div>
```
JavaScript代码:
```javascript
$(document).ready(function() {
// 当选择框改变时,触发Ajax请求
$('#category, #price').change(function() {
var category = $('#category').val();
var price = $('#price').val();
// 发送Ajax请求
$.ajax({
url: 'filter.php', // 请求的URL
type: 'GET', // 请求方式
data: {
category: category,
price: price
},
success: function(response) {
// 在页面上显示结果
$('#result').html(response);
},
error: function(xhr, status, error) {
// 处理错误
alert('发生错误:' + error);
}
});
});
});
```
PHP代码(filter.php):
```php
<?php
// 获取筛选条件
$category = $_GET['category'];
$price = $_GET['price'];
// 根据条件查询数据库
// ...
// 返回结果
echo '查询结果:...';
?>
```
这个示例中,当用户选择分类或价格范围时,会触发Ajax请求,发送选择的条件到服务器端的filter.php文件。在filter.php文件中,可以根据条件查询数据库,并返回结果。在JavaScript中,使用success回调函数来在页面上显示结果,使用error回调函数来处理错误。
阅读全文