本来用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. centos7 文件属性介绍block+软硬连接介绍

    block block用于存放的是数据信息 block默认大小是4k,可以进行调整 比较大的文件,会占用多个block 比较小的文件,剩余空间无法使用,浪费磁盘空间 软硬链接的区别 硬链接:是文件的多 ...

  2. BrowserSync 本地服务器的起用

    最简单粗暴的方法:进入项目根目录,执行命令browser-sync start --server --files "**"     监听所有

  3. Anaconda3+CUDA10.1+CUDNN7.6+TensorFlow2.6安装（Ubuntu16）

    欢迎访问我的GitHub https://github.com/zq2599/blog_demos 内容:所有原创文章分类汇总及配套源码,涉及Java.Docker.Kubernetes.DevOPS ...

  4. 利用Spring AOP切面对用户访问进行监控

    开发系统时往往需要考虑记录用户访问系统查询了那些数据.进行了什么操作,尤其是访问重要的数据和执行重要的操作的时候将数记录下来尤显的有意义.有了这些用户行为数据,事后可以以用户为条件对用户在系统的访问和 ...

  5. 一条 Git 命令减少了一般存储空间，我的服务器在偷着笑

    元旦不是搭建了一个<Java 程序员进阶之路>的网站嘛,其中用到了 Git 来作为云服务器和 GitHub 远程仓库之间的同步工具. 作为开发者,相信大家都知道 Git 的重要性.Git ...

  6. 1013day-人口普查系统

    1.shuchu.jsp <%@ page language="java" contentType="text/html; charset=UTF-8" ...

  7. mysql表设计原则

    0.三大范式及反范式 ◆ 第一范式(1NF):强调的是列的原子性,即列不能够再分成其他几列.  ◆ 第二范式(2NF):首先是 1NF,另外包含两部分内容,一是表必须有一个主键:二是没有包含在主键中的 ...

  8. 搭建服务器之www-向外提供视频服务by html5 video标签

    搭建好www服务器,主要目的有两个一个是试验下,另一个是想给女朋友个惊喜,给她个带视频的网页,嘿嘿当前测试下相应功能. 1,采用html5的视频功能:bideo标签. 源码如下: <!docty ...

  9. vue操作dom元素

    传统的方法获取dom元素操作dom,通常是获取类名,id,属性等来获取到dom,但在vue中获取组件dom的话会有问题,请看下面代码: 控制台打印出来的结果如下,你会发现正常标签可以正常显示,但是组件 ...

  10. golang中的异常处理

    1. defer是go提供的一种资源处理的方式.defer的用法遵循3个原则在defer表达式被运算的同时,defer函数的参数也会被运算.如下defer的表达式println运算的同时,其入参i也会 ...