Spring Boot集成thymeleaf异步刷新页面

现在比较流行前后端分离开发，但在有些业务场景下模板引擎也用的不少。本文介绍thymeleaf页面的局部更新，Spring Boot采用的是2.0.4，先来看代码。

IndexController.java

package com.example.demo.thymeleaf;import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.RequestMapping;import java.util.ArrayList;
import java.util.HashMap;
import java.util.List;
import java.util.Map;@Controller
@RequestMapping("/refresh")
public class IndexController {@RequestMappingpublic String globalRefresh(Model model) {List<Map<String,String>> lists = new ArrayList<>();Map<String,String> map = new HashMap<>();map.put("author", "曹雪芹");map.put("title", "《红楼梦》");map.put("url", "www.baidu.com");lists.add(map);// 用作对照model.addAttribute("refresh", "我不会被刷新");model.addAttribute("title", "我的书单");model.addAttribute("books", lists);return "test";}/*** 局部刷新，注意返回值* @param model* @return*/@RequestMapping("/local")public String localRefresh(Model model) {List<Map<String,String>> lists = new ArrayList<>();Map<String,String> map = new HashMap<>();map.put("author", "罗贯中");map.put("title", "《三国演义》");map.put("url", "www.baidu.com");lists.add(map);model.addAttribute("title", "我的书单");model.addAttribute("books", lists);// "test"是test.html的名，// "table_refresh"是test.html中需要刷新的部分标志,// 在标签里加入：th:fragment="table_refresh"return "test::table_refresh";}
}

test.html

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head><title>thymeleaf局部刷新</title><meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /><script type="text/javascript" th:src="@{/js/jquery.min.js}"></script>
</head>
<body>
<div><span style="margin:0 auto;font-size: 26px" th:text="${refresh}"></span><button onClick="localRefresh()">点击刷新表格</button>
</div><!-- 需要局部刷新的部分，设置了th:fragment="table_refresh" -->
<div id="table_refresh" style="text-align: center;margin:0 auto;width: 900px" th:fragment="table_refresh"><h1 th:text="${title}"></h1><table width="100%" border="1" cellspacing="1" cellpadding="0"><tr><td>Author</td><td>Book</td><td>Url</td></tr><tr th:each="book : ${books}"><td th:text="${book.author}"></td><td th:text="${book.title}"></td><td th:text="${book.url}"></td></tr></table>
</div>
</body>
<script>function localRefresh() {// 装载局部刷新返回的页面$('#table_refresh').load("/refresh/local");}
</script>
</html>

页面引入了jquery,运行后页面内容如下：点击“点击刷新表格”后页面如下： $('#table_refresh').load("/refresh/local")这行代码即异步请求局部的页面，调用它返回的结果如下：

只返回了我们在页面中设置了th:fragment="table_refresh"部分，就实现了局部刷新

Spring Boot集成thymeleaf异步刷新页面相关推荐

Spring Boot集成Thymeleaf模板引擎
一.Thymeleaf 模板介绍 Spring Boot 推荐使用Thymeleaf 来代替传统开发中的JSP,那么什么是Thymeleaf 模板引擎呢?下面就来简单的介绍一下. Thymeleaf ...
js文件中怎么使用thymeleaf标签_007、Spring Boot集成Thymeleaf模板引擎
1. Thymeleaf 介绍 Thymeleaf 是适用于 Web 和独立环境的现代服务器端 Java 模板引擎. Thymeleaf 的主要目标是为您的开发工作流程带来优雅的自然模板 - 可以在浏 ...
Spring Boot关于thymeleaf公共页面抽取
目录理论演示及源码理论三种引入公共片段的th属性: 1. th:insert:将公共片段整个插入到声明引入的元素中: 2. th:replace:将声明引入的元素替换为公共片段: 3. ...
6.3 Spring Boot集成mongodb开发
6.3 Spring Boot集成mongodb开发本章我们通过SpringBoot集成mongodb,Java,Kotlin开发一个极简社区文章博客系统. 0 mongodb简介 Mongo 的主 ...
spring boot 集成 websocket 实现消息主动推送
前言 http协议是无状态协议,每次请求都不知道前面发生了什么,而且只可以由浏览器端请求服务器端,而不能由服务器去主动通知浏览器端,是单向的,在很多场景就不适合,比如实时的推送,消息通知或者股票等信息 ...
SpringMVC访问WEB-INF下的jsp解决方案Spring Boot集成使用jsp
SpringMVC访问WEB-INF下的jsp解决方案一. 问题将项目中用到的jsp等文件放在WEB-INF目录下.实际开发过程中,需要在框架页面通过iframe嵌入对应的具体页面,此处如果直接 ...
软件架构-Spring boot集成模板引擎swagger2实现
上次说过springboot其实就是一个CI工具,如何体验出来CI的作用就是持续集成,它可以集成各种的工具,这里说说关于模板的集成引擎和Swagger. (一)Spring boot 集成模板引擎实现 ...
Spring Boot (十五)： Spring Boot + Jpa + Thymeleaf 增删改查示例
<p>这篇文章介绍如何使用 Jpa 和 Thymeleaf 做一个增删改查的示例.</p> 先和大家聊聊我为什么喜欢写这种脚手架的项目,在我学习一门新技术的时候,总是想快速的搭 ...
Spring Boot集成第三方登录之微博登录
Spring Boot集成第三方登录之微博登录准备工作网站接入开发者信息认证创建应用流程分析引导授权用户用户授权授权成功换取Access Token HTTP客户端使用Access ...

Spring Boot集成thymeleaf异步刷新页面

Spring Boot集成thymeleaf异步刷新页面相关推荐

最新文章

热门文章