用jq代码写商品查询案例能够帮助用户按照预设的条件快速的查询商品信息,实现的思路主要是当用户输入指定的价格区间和商品名称后,单击页面中的搜索按钮,页面会展示符合当前条件下的商品信息。
时间: 2024-02-29 07:51:18 浏览: 76
好的,我可以为您提供一段基于jq代码的商品查询案例。首先,我们需要使用HTML代码创建一个搜索框和搜索按钮,如下所示:
```html
<div>
<label for="name">商品名称:</label>
<input type="text" id="name">
</div>
<div>
<label for="price">价格区间:</label>
<input type="number" id="minPrice" placeholder="最低价">
<span>-</span>
<input type="number" id="maxPrice" placeholder="最高价">
</div>
<button id="searchBtn">搜索</button>
```
接下来,我们使用jq代码来实现商品查询功能。首先,我们需要获取用户输入的商品名称和价格区间:
```javascript
$('#searchBtn').on('click', function() {
var name = $('#name').val();
var minPrice = $('#minPrice').val();
var maxPrice = $('#maxPrice').val();
// ...
});
```
接着,我们可以使用Ajax来向后端发送请求,获取符合条件的商品信息:
```javascript
$('#searchBtn').on('click', function() {
var name = $('#name').val();
var minPrice = $('#minPrice').val();
var maxPrice = $('#maxPrice').val();
$.ajax({
url: '/search',
type: 'get',
data: {
name: name,
minPrice: minPrice,
maxPrice: maxPrice
},
success: function(res) {
// 处理返回的商品信息
},
error: function(err) {
console.log(err);
}
});
});
```
在上面的代码中,我们向后端发送了一个GET请求,其中包含了用户输入的商品名称和价格区间。在成功获取到后端返回的商品信息后,我们可以将其展示在页面上:
```javascript
success: function(res) {
var html = '';
for (var i = 0; i < res.length; i++) {
html += '<div>';
html += '<p>商品名称:' + res[i].name + '</p>';
html += '<p>商品价格:' + res[i].price + '</p>';
html += '</div>';
}
$('#result').html(html);
},
```
在上面的代码中,我们使用了一个循环来遍历返回的商品信息,并将其拼接成HTML字符串,最后将其添加到页面中指定的元素中。
综上所述,以上就是一个基于jq代码的商品查询案例的实现思路和代码示例。
阅读全文