layui条件查询前端后端代码
时间: 2023-08-30 13:11:02 浏览: 48
这里提供一个简单的前后端联动的条件查询示例,使用的是LayUI框架:
前端代码:
HTML部分:
```html
<div class="layui-inline">
<label class="layui-form-label">名称:</label>
<div class="layui-input-inline">
<input type="text" name="name" placeholder="请输入名称" class="layui-input">
</div>
</div>
<div class="layui-inline">
<button class="layui-btn" id="searchBtn"><i class="layui-icon"></i>查询</button>
</div>
```
JavaScript部分:
```javascript
// 监听查询按钮点击事件
$('#searchBtn').on('click', function() {
var name = $('input[name=name]').val();
// 查询条件传递给后端
table.reload('table', {
where: {
name: name
}
});
});
```
后端代码:
Java部分:
```java
@RequestMapping(value = "/list", method = RequestMethod.GET)
@ResponseBody
public ResultVO list(@RequestParam(value = "name", required = false) String name) {
List<SomeEntity> entityList = someService.findByName(name);
return ResultVO.success(entityList);
}
```
其中,前端通过监听查询按钮点击事件,获取用户输入的查询条件,然后将条件作为参数传递给后端接口。后端接口通过接收参数,根据条件查询数据,并将查询结果返回给前端。在这个示例中,我们使用了一个名为`SomeEntity`的实体类,以及一个名为`someService`的服务类,具体实现可以根据项目需求进行修改。