本来用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语言系列之自定义实现日志库

    日志库logo gitee地址传送门:https://gitee.com/zhangyafeii/logo 日志库需求分析 1. 支持往不同的地方输出日志 2. 日志分级别 Debug Trace I ...

  2. SYCOJ798Biorhythms

    https://oj.shiyancang.cn/Problem/798.html #include<bits/stdc++.h> using namespace std; typedef ...

  3. 移动端position:fixed 解决方案

    相信不少人做移动端项目的时候都会遇到position:fixed 的坑. 下面提供一个解决方法,不用引入任何其他的js库,纯css解决. 解决问题的关键就是:fixed元素内部必须嵌套一个positi ...

  4. Python网络编程之网络基础

    Python网络编程之网络基础 目录 Python网络编程之网络基础 1. 计算机网络发展 1.1. OSI七层模型 1.2. 七层模型传输数据过程 2. TCP/IP协议栈 2.1 TCP/IP和O ...

  5. springboot应用中使用CommandLineRunner

    在springboot应用中,存在这样的使用场景,在springboot ioc容器创建好之后根据业务需求先执行一些操作,springboot提供了两个接口可以实现该功能: CommandLineRu ...

  6. 读《疯狂Java讲义》笔记总结一

    最近在读<疯狂Java讲义>,现把其中遇到的一些自己以前没掌握的点儿记录下来. 1.字符串相关 字符串不是基本类型,字符串是一个类,也就是一个引用类型. 字符串转int类型String a ...

  7. Android学习笔记2

    4,用intent在activity之间传递数据(两个Activity可能不是在一个应用程序中) (1),从MainActivity向HelloActivity传递参数123 package com. ...

  8. 使用EdgyGeo Cesium工具查询下载数据集

    Cesium中文网:http://cesiumcn.org/ | 国内快速访问:http://cesium.coinidea.com/ EdgyGeo, Inc. 带来了一件非常棒的工作支撑架构.工程 ...

  9. List子接口

    简介 特点: 有序, 有下标, 元素可以重复 常用方法 boolean add(E e) 将指定的元素追加到此列表的末尾(可选操作). void add(int index, E element) 将 ...

  10. 为什么ConcurrentHashMap是线程安全的？

    ConcurrentHashMap 是 HashMap 的多线程版本,HashMap 在并发操作时会有各种问题,比如死循环问题.数据覆盖等问题.而这些问题,只要使用 ConcurrentHashMap ...