thymeleaf局部刷新

之前用thymeleaf一直只是在页面加载的时候利用thymeleaf的标签取值,而ajax加载的数据则需要使用js添加到html中,那我们如果需要动态得局部刷新数据,该如何操作呢?

方法:使用th:fragment fragment可以理解为一个代码模板,thymeleaf可以根据这个进行定位。

html代码

文章分类:

ajax请求

$('#btn').click(function () {
    var url = '/blog/test';
    $.ajax({
        url: url,
        type: 'POST',
        success: function (data) {
            $(".article_type").html(data);
        }
    })
})

后台请求

@RequestMapping(value="/test",method=RequestMethod.POST)
public String aaa(Model model) {
    List articleTypes = articleTypeService.selectLeafArticleTypes();
    ArticleType a = new ArticleType();
    model.addAttribute("articleTypes",articleTypes);
        
    return "write_article::article_type";
}

注意返回值是write_article::article_typewrite_article是视图名称(html文件名称),article_type是fragment的名称。这样就只是填充article_type的数据,而不用刷新整个页面,达到动态刷新的目的。

也可以使用load函数进行局部刷新


 

你可能感兴趣的:(前端)