本来用Thymeleaf也没想着深度使用ajax，就是用也是非常传统的ajax方式提交然后js控制修改下变量。闲来无事的时候看Thymeleaf的教程发现一哥们的实现方式，以及实现思路，堪称惊奇，先说说主角吧! 就是这货 th:fragment，先来看下官方的解释。

模板中，经常希望从其他模板中包含公共部分，如页眉，页脚，公共菜单等部分，为了做到这点，Thymeleaf 可以使th:fragment 属性来定义被包含的模版片段，以供其他模版包含。大白话就是先定义好一个小片段，需要的时候动态的把这玩意找出来然后插入到指定的地方。恩，这个操作貌似可以尝试下和jq的动态加载搞一起，那不就是ajax操作了，而且如果能实现连修改的变量的js都不用写了，Thymeleaf直接帮忙完成了，说干就干。代码如下，前端代码！

<!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("/student/stuchapter/local");   //注意这里世jq的方法  可不是模板的神器方法！

    }

</script>

</html>
//下面是测试ajax用的

 @RequestMapping("test")

 public String globalRefresh(ModelMap 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 prefix+"/test";  

}

 /**

  * 局部刷新，注意返回值

  * @param model

  * @return

  */

 @RequestMapping("local")

 public String localRefresh(ModelMap 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 prefix+"/test::table_refresh";

 }

是不是很神奇！整个界面都没有js动态修改变量，但是整体却又完美实现页面的动态更改！

点击后

马上应用到自己的项目中！巨好用！

暑假撸系统6- Thymeleaf ajax交互！的更多相关文章

  1. 暑假撸系统1-先把git后悔药准备好！

    学校规定让暑假自己撸一款在线考试系统,其实的确需要一个款在线的考试系统系统,因为平时学校是使用Excel讲解选择题的.基于这个目标那么就话不多说.开干! 本来趁着项目想练练手,使用些新学习的技能看看, ...

  2. 暑假撸系统5- Thymeleaf 常用标签的

    上次博客已经是三天前了,后期修补和细化的东西多了,进度没有前几天那么明显了.因为原来工作大多是后端居多,如果非要前台也会选择一些相对对ui依赖比较小的框架,比如extjs,所以这次的基础排版就费劲了, ...

  3. 暑假撸系统3- petty热更新 mybatis自动填充时间字段！

    经过了昨天纠结技术选型,和一大堆xml配置,终于把架子搭好了.因为最近一次做java项目也在好多年以前了(毕竟用了pytohn以后谁也不想再回来java了),java的生态发生了长足的进步,本来想从原 ...

  4. 暑假撸系统7- 熊孩子的捣乱！javascript保存前台状态！

    系统大体框架已经搭的差不多了, 往下就是技术性的美化以及修补了,但这也是最最耗费时间的.在这个过程就发现了一个有意思的需求,这里把思路以及解决方案总结下. 因为做的是考试系统,不管是大或者小的考试,本 ...

  5. springmvc与ajax交互常见问题

    这是我个人再编写博客系统的时候,因个人疏忽犯下的低级错误. 不过犯错是一件好事,有助于总结. 1.关于参数前加@RequestBody 如果是使用ajax交互时,必须要加上这个contentType: ...

  6. ThinkPHP中使用ajaxReturn进行ajax交互

    以管理员登录为例来介绍下$this->ajaxReturn与模板页进行ajax交互使用方法 首先看PHP控制器的处理,在application/Admin/Controller/LoginCon ...

  7. struts2 的验证框架validation如何返回json数据 以方便ajax交互

    struts2 的验证框架validation简单,好用,但是input只能输出到jsp页面通过struts2的标签<s:fielderror  />才能取出,(EL应该也可以). 如果使 ...

  8. struts2中使用json插件实现ajax交互

    json插件可以简单的实现ajax交互,避免了使用struts2-dojo-plugin.jar包时带来的struts2.x版本冲突问题.并且减少了使用ajax标签时需要的繁琐的配置包括web.xml ...

  9. Swift - 访问通讯录联系人（使用系统提供的通讯录交互界面）

    1,通讯录访问介绍 通讯录(或叫地址簿,电话簿)是一个数据库,里面储存了联系人的相关信息.要实现访问通讯录有如下两种方式: (1)AddressBook.framework框架 : 没有界面,通过代码 ...

随机推荐

  1. 日志收集系统系列（四）之LogAgent优化

    实现功能 logagent根据etcd的配置创建多个tailtask logagent实现watch新配置 logagent实现新增收集任务 logagent删除新配置中没有的那个任务 logagen ...

  2. Linux上天之路（十三）之系统进程管理

    主要内容 进程介绍 进程管理 进程优先级 1. 进程介绍 Linux系统中的几乎任何行动都会以进程的形式进行.如果你用网络浏览器查看网页,浏览器就作为进程运行.如果键入bash shell的命令行,这 ...

  3. 【Java】包装类

    文章目录 包装类 什么是包装类 基本数据类型-->包装类 包装类-->基本数据类型 自动装箱与自动拆箱 基本数据类型.包装类与String的转换 基础数据类型.包装类-->Strin ...

  4. 论文解读第三代GCN《 Deep Embedding for CUnsupervisedlustering Analysis》

    Paper Information Titlel:<Semi-Supervised Classification with Graph Convolutional Networks>Aut ...

  5. HttpServletResponse接口详解

    在 Servlet API 中,定义了一个 HttpServletResponse 接口,它继承自 ServletResponse 接口.HttpServletResponse 对象专门用来封装 HT ...

  6. lvs的三种模式

    一.NAT模式(VS-NAT) 原理:就是把客户端发来的数据包的IP头的目的地址,在负载均衡器上换成其中一台RS的IP地址,并发至此RS来处理,RS处理完成后把数据交给经过负载均衡器,负载均衡器再把数 ...

  7. mysqldump 逻辑备份和物理备份

    逻辑备份 逻辑备份是备份sql语句,在恢复的时候执行备份的sql语句实现数据库数据的重现. 工具:mysqldump 特点: 1.可移植性比较强 2.备份和恢复的花费时间长,不适用于大型业务系统 物理 ...

  8. K8s配置配置存活、就绪和启动探测器

    kubelet 使用存活探测器来知道什么时候要重启容器. 例如,存活探测器可以捕捉到死锁(应用程序在运行,但是无法继续执行后面的步骤). 这样的情况下重启容器有助于让应用程序在有问题的情况下更可用. ...

  9. python30day

    内容回顾 tcp协议的多人多次通信 和一个人通信多说句话 和一个人聊完再和其他人聊 bind 绑定一个id和端口 socket()tcp协议的server listen 监听,代表socket服务的开 ...

  10. hive 常用日期格式转换

    固定日期转换成时间戳select unix_timestamp('2016-08-16','yyyy-MM-dd') --1471276800select unix_timestamp('201608 ...