本来用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. 聊聊docker那些端口问题

    今天来系统聊一聊docker的端口,常见的有容器内程序端口.容器端口.主机端口.Dockerfile中EXPOSE端口.docker-compose和docker run中的port等. 貌似很多端口 ...

  2. leetcode 102. 二叉树的层次遍历 及 103. 二叉树的锯齿形层次遍历

    102. 二叉树的层次遍历 题目描述 给定一个二叉树,返回其按层次遍历的节点值. (即逐层地,从左到右访问所有节点). 例如: 给定二叉树: [3,9,20,null,null,15,7], 3 / ...

  3. 1121day-户别确认

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

  4. 2月1日 体温APP开发记录

    1.阅读构建之法 现代软件工程(第三版) 2.观看Android开发视频教程最新版 Android Studio开发

  5. unity3d微软语音识别httppost失败。安全验证问题

    using System; using System.Collections; using System.Collections.Generic; using System.IO; using Sys ...

  6. 豆瓣爬虫——通过json接口获取数据

    最近在复习resqusts 爬虫模块,就重新写了一个豆瓣爬虫,这个网页从HTML 源码上来看是没有任何我想要的信息的,如下图所示: 这是网页视图,我在源码中查找影片信息,没有任何信息,如图: 由此我判 ...

  7. Python实现自动更改系统用户密码，生成随机密码

    算是一个实用的例子,定制系统任务,并将随机密码上传至日志服务器,实现定期修改密码: 部分代码: 1 #!/usr/bin/env python 2 #coding:utf-8 3 import ran ...

  8. 集合框架-HashSet集合(无序唯一)

    1 package cn.itcast.p4.hashset.demo; 2 3 import java.util.HashSet; 4 import java.util.Iterator; 5 /* ...

  9. 《HelloGitHub》第 70 期

    兴趣是最好的老师,HelloGitHub 让你对编程感兴趣! 简介 HelloGitHub 分享 GitHub 上有趣.入门级的开源项目. https://github.com/521xueweiha ...

  10. Android开发-资源导入

    安卓开发首先要导入开发资源,这些资源包括图片,图标等,方便开发过程中的使用 我是跟着b站博主做的记账本app所以导入的资源也来自于网络 将资源导入到res文件夹下这里面包括颜色资源,布局资源,图片资源 ...