数据查询的局部更新

Day11-新闻条件查找显示表格

情景

数据查询的局部更新_第1张图片
希望在上面搜索条件保留页面不刷新的情况下实现表格查询结果的更新。

分析

需要用到Ajax的局部刷新
逻辑:通过Ajax将搜索条件传给后端,后端根据搜索条件通过model传给前端获取的页面。

步骤

  1. 为翻页键写相应函数,通过Ajax获取搜索框等值及page对象
  2. 在controller中利用NewQuery接收前端传过来的信息,并利用信息返回page到前端
  3. 在service接口中

详细介绍条件查询的接口实现

  1. 首先认识函数总逻辑
new Specification() {
            @Override
            public Predicate toPredicate(Root root, CriteriaQuery cq, CriteriaBuilder cb) {
                //root  数据库字段
                //CriteriaQuery 执行查询条件
                //CriteriaBuilder   构建查询条件
                
                return null;
            }
  1. 构建查询条件
    建立查询条件集合通过判断传入的信息是否为空决定是否添加该查询条件进集合中。
 //构建查询条件
List list = new ArrayList<>();
//模糊搜索
if(!"".equals(newQuery.getTitle()) && newQuery.getTitle() != null){
    list.add(cb.like(root.get("title"),"%" + newQuery.getTitle() + "%"));
}
if(newQuery.getTypeId() != null){
    list.add(cb.equal(root.get("type").get("id"),newQuery.getTypeId()));
}
if(newQuery.isRecommend()){
    list.add(cb.equal(root.get("recommend"),newQuery.isRecommend()));
}
  1. 执行查询
//执行查询
cq.where(list.toArray(new Predicate[list.size()]));

错误

很好,果然不会那么顺利,已经报错了,让我们一步步解决它。
数据查询的局部更新_第2张图片
我们先从前面开始检查,发现并没有执行ajax操作。应该是ajax写错了,果然如此。掉了一个val。
数据查询的局部更新_第3张图片

成果

数据查询的局部更新_第4张图片

你可能感兴趣的:(Java全栈项目,java,ajax)