本来用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. Go语言系列之函数

    函数是组织好的.可重复使用的.用于执行指定任务的代码块.本文介绍了Go语言中函数的相关内容. 函数 Go语言中支持函数.匿名函数和闭包,并且函数在Go语言中属于"一等公民". 函数 ...

  2. echart 横轴倾斜

    xAxis: [ { type: 'category', data:[], axisLabel: { interval:0, rotate:40 }, grid: { left: '10%', bot ...

  3. 【刷题-LeetCode】199 Binary Tree Right Side View

    Binary Tree Right Side View Given a binary tree, imagine yourself standing on the right side of it, ...

  4. linux新分区无法新建文件夹

    问题 因为最初分区480g随便都给了home,后来发现备份以及导出系统至IOS都要另外插硬盘很麻烦.所以需要重新分区.使用装机U盘的live ubuntu20系统使用Gparted分区后,发现回到Ub ...

  5. 带你学习Flood Fill算法与最短路模型

    一.Flood Fill(连通块问题) 0.简介 Flood Fill(洪水覆盖) 可以在线性的时间复杂内,找到某个点所在的连通块! 注:基于宽搜的思想,深搜也可以做但可能会爆栈 flood fill ...

  6. 分布式一致性协议Raft，以及难搞的Paxos

    https://blog.csdn.net/colorant/article/details/73887706

  7. 搭建服务器之www-安装配置

    www服务器,使用软件Apache,服务守护进程为httpd,以下为安装配置过程: 1.首先yum install httpd,会下载安装Apache软件,可以用apachectrl -v查看版本,发 ...

  8. gin中绑定表单数据至自定义结构体

    package main import "github.com/gin-gonic/gin" type StructA struct { FieldA string `form:& ...

  9. IoC容器-Bean管理（bean作用域）

    IoC操作Bean管理(bean作用域) 1,在Spring里面,设置创建bean实例是单实例还是多实例 2,在Spring里面,默认情况下,bean是单实例对象 3,如何设置单实例还是多实例 (1) ...

  10. HTML 页面的动态线条背景-三岁

    保存一个自己正在用的背景 会跟随鼠标变换的动态线条 以免后面还得找 挺好看的 效果图: 代码如下: <script type="text/javascript" color= ...