ajax局部刷新

我们在完成搜索功能时，希望能实现一个效果，就是当搜索结果出现时，搜索的条件仍然能够保留，也就是只更新红色框里面的内容。要实现这种功能，可以借助ajax的局部刷新方法。

前端

1.下面是我的搜索按钮，当点击搜索时，会在js代码中获得该点击事件。

<div class="field">
            <button  type="button" id="search-btn" class="ui mini teal basic button"><i class="search icon"></i>搜索</button>
          </div>

2.下面是js代码，当获取到搜索按钮的点击事件后，会将表单中一个name为page的输入框值设置为0，表示当前页是第一页。然后调用loadData()，loadData()中调用了ajax的load方法。
jQuery load() 方法是简单但强大的 AJAX 方法。
load() 方法从服务器加载数据，并把返回的数据放入被选元素中。

语法：
$(selector).load(URL,data,callback);

必需的 URL 参数规定您希望加载的 URL。
可选的 data 参数规定与请求一同发送的查询字符串键/值对集合。
可选的 callback 参数是 load() 方法完成后所执行的函数名称。

$("#search-btn").click(function () {
      $("[name='page']").val(0);
      loaddata();
    });
    function loaddata() {
      $("#table-container").load(/*[[@{/admin/news/search}]]*/"/admin/news/search",{
        title : $("[name='title']").val(),
        typeId : $("[name='typeId']").val(),
        recommend : $("[name='recommend']").prop('checked'),
        page : $("[name='page']").val()
      });
    }

table-container为要刷新的部分的div的id，在下面的html代码中可以看到

3.newsService里的listNews()方法是返回查询数据的，这里就不多做叙述。
注意我们return的不是一个完整的html文件名，而是一个片段，这个片段可以在下图的html文件看到该片段是一个table标签，这表示我们只会更新这个table标签之内的数据，这样就完成了局部刷新。

 @PostMapping("/news/search")
    public String search(@PageableDefault(size = 3,sort = "updateTime",direction = Sort.Direction.DESC) Pageable pageable,
                         Model model,
                         NewQuery newQuery){
        model.addAttribute("page",newsService.listNews(pageable,newQuery));
        //System.out.println(newQuery);
        return "admin/news :: newsList";

    }