thymeleaf局部刷新

简介: thymeleaf局部刷新

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

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

html代码

<div class="article_type" th:fragment="article_type">
    文章分类:
    <div th:each="articletype : ${articleTypes}">                      
      <label class="checkbox-inline">
          <input type="checkbox" th:text="${articletype.text}" id="inlineCheckbox1" value="option1"> 
      </label>
    </div>
 </div>

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<ArticleType> 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函数进行局部刷新

<script>
    $('#btn').click(function () {
        var url = '/blog/test';
        $('.article_type').load(url);
    });
</script>

 


相关文章
|
6月前
|
JSON 前端开发 Java
利用Spring Boot处理JSON数据实战(包括jQuery,html,ajax)附源码 超详细
利用Spring Boot处理JSON数据实战(包括jQuery,html,ajax)附源码 超详细
151 0
|
XML 设计模式 前端开发
如何使用Thymeleaf给web项目中的网页渲染显示动态数据?(一)
如何使用Thymeleaf给web项目中的网页渲染显示动态数据?(一)
|
6月前
|
XML 前端开发 Java
Spring Boot的Web开发之Thymeleaf模板引擎的解析及使用(Thymeleaf的基础语法以及常用属性)
Spring Boot的Web开发之Thymeleaf模板引擎的解析及使用(Thymeleaf的基础语法以及常用属性)
146 0
如何使用Thymeleaf给web项目中的网页渲染显示动态数据?(三)
如何使用Thymeleaf给web项目中的网页渲染显示动态数据?(三)
|
XML JSON 前端开发
【Spring MVC学习笔记 六】SpringMVC框架整合AJAX完成局部刷新
【Spring MVC学习笔记 六】SpringMVC框架整合AJAX完成局部刷新
100 0
|
前端开发
thymeleaf实现ajax请求的两种方式
thymeleaf实现ajax请求的两种方式
|
SQL 前端开发 JavaScript
Spring Boot + Ajax前后端分离实现三级联动
Spring Boot + Ajax前后端分离实现三级联动
926 1
Spring Boot + Ajax前后端分离实现三级联动
|
存储 缓存 前端开发
网站页面静态化(二)thymeleaf生成
本文说明了如何基于springboot和thymeleaf的全站页面静态化方案的大概解决方案​雏形。例子中说明了具体的处理流程以及关键技术,至于存储和网页模板需要根据实际项目进行​调整开发。
478 0
网站页面静态化(二)thymeleaf生成