Spring Boot集成thymeleaf异步刷新页面

简介: 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 {
    @RequestMapping
    public 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"部分,就实现了局部刷新


相关文章
|
2天前
|
安全 Java 数据库连接
Spring Boot + Security + MyBatis + Thymeleaf + Activiti 快速开发平台项目
Spring Boot + Security + MyBatis + Thymeleaf + Activiti 快速开发平台项目
12 0
|
4天前
|
消息中间件 监控 Java
Java一分钟之-Spring Integration:企业级集成
【6月更文挑战第11天】Spring Integration是Spring框架的一部分,用于简化企业应用的集成,基于EIP设计,采用消息传递连接不同服务。核心概念包括通道(Channel)、端点(Endpoint)和适配器(Adapter)。常见问题涉及过度设计、消息丢失与重复处理、性能瓶颈。解决策略包括遵循YAGNI原则、使用幂等性和事务管理、优化线程配置。通过添加依赖并创建简单消息处理链,可以开始使用Spring Integration。注意实践中要关注消息可靠性、系统性能,逐步探索高级特性以提升集成解决方案的质量和可维护性。
31 3
Java一分钟之-Spring Integration:企业级集成
|
4天前
|
NoSQL Java MongoDB
Java一分钟之-Spring Data MongoDB:MongoDB集成
【6月更文挑战第11天】Spring Data MongoDB简化Java应用与MongoDB集成,提供模板和Repository模型。本文介绍其基本用法、常见问题及解决策略。包括时间字段的UTC转换、异常处理和索引创建。通过添加相关依赖、配置MongoDB连接、定义Repository接口及使用示例,帮助开发者高效集成MongoDB到Spring Boot应用。注意避免时间差、异常处理不充分和忽视索引的问题。
23 0
|
8天前
|
前端开发 Java 关系型数据库
在Spring3 MVC中五步配置集成注解方式Hibernate3
在Spring3 MVC中五步配置集成注解方式Hibernate3
18 3
|
9天前
|
前端开发 IDE Java
Spring3 MVC 集成Velocity中文支持
Spring3 MVC 集成Velocity中文支持
27 7
|
9天前
|
前端开发 Java BI
Spring3 Web MVC 集成Jasper Report生成PDF例子
Spring3 Web MVC 集成Jasper Report生成PDF例子
25 7
|
16天前
|
Java 数据库 Spring
springboot 解耦、隔离、异步的原则以及实战
【5月更文挑战第30天】在Spring Boot中实现解耦、隔离和异步的原则,能够提升应用程序的可维护性、可扩展性和性能。下面我会先介绍这三个原则的基本概念和意义,然后通过实战示例展示如何在Spring Boot应用中应用这些原则。
40 1
|
22天前
|
Java 关系型数据库 数据库连接
MyBatis-Plus介绍及Spring Boot 3集成指南
MyBatis-Plus是一个MyBatis扩展工具,旨在简化Java开发中的CRUD操作。它具有无侵入性、低损耗、强大的CRUD功能、Lambda表达式支持、主键自动生成、ActiveRecord模式、全局操作和内置代码生成器等特点。在Spring Boot 3中集成MyBatis-Plus,需在pom.xml添加依赖,排除特定版本的mybatis-spring,并用@MapperScan注解指定Mapper接口路径。此外,还介绍了如何使用MyBatis-Plus代码生成器自动生成Mapper、Model、Service和Controller层代码,以加速开发。
65 2
MyBatis-Plus介绍及Spring Boot 3集成指南
|
23天前
|
前端开发 Java 关系型数据库
小唐开始学 Spring Boot——(5)前端显示集成
小唐开始学 Spring Boot——(5)前端显示集成
|
消息中间件 Java Kafka
Kafka——使用spring进行集成
生产者: 消费者: ...
1063 0