thymeleaf局部刷新_程序三两行的博客-程序员宅基地_thymeleaf 局部刷新

技术标签: # thmeleaf、freemarker  

之前用thymeleaf一直只是在页面加载的时候利用thymeleaf的标签取值,而ajax加载的数据则需要使用js添加到html中,那我们如果需要动态得局部刷新数据,该如何操作呢?

方法:使用th:fragment fragment可以理解为一个代码模板,thymeleaf可以根据这个进行定位。

html代码

<div class="article_type" th:fragment="article_type">
    文章分类:
    <div th:each="articletype : ${articleTypes}">                      
	    <label class="checkbox-inline">
	        <input type="checkbox" th:text="${articletype.text}" id="inlineCheckbox1" value="option1"> 
	    </label>
    </div>
 </div>

ajax请求

    $('#btn').click(function () {
        var url = '/blog/test';
        $.ajax({
            url: url,
            type: 'POST',
            success: function (data) {
                $(".article_type").html(data);
            }
        })
    })

后台请求

@RequestMapping(value="/test",method=RequestMethod.POST)
public String aaa(Model model) {
    List<ArticleType> articleTypes = articleTypeService.selectLeafArticleTypes();
    ArticleType a = new ArticleType();
    model.addAttribute("articleTypes",articleTypes);
        
    return "write_article::article_type";
}

注意返回值是write_article::article_typewrite_article是视图名称(html文件名称),article_type是fragment的名称。这样就只是填充article_type的数据,而不用刷新整个页面,达到动态刷新的目的。

也可以使用load函数进行局部刷新

<script>
    $('#btn').click(function () {
        var url = '/blog/test';
        $('.article_type').load(url);
    });
</script>

 

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/qq_34491508/article/details/107941781

智能推荐

C++中的未定义和depends_zhaoyan_cpp的博客-程序员宅基地_c++ invariant

先立个flag, 从此以后有三不聊:不聊政治,不聊宗教,不聊教育孩子。这三个主题有个共同的特点:大家都有自己的观点,大家都认为自己的观点对,但是其实谁的观点还都没啥用!而且这些话题插嘴的门槛还特别底, 这就是为啥容易吵吵起来的原因了。所以我决定聊点C++语言,不好意思,这个热心网友想插嘴还不太容易。 今天主要聊聊我最近发现的C++的一个现象:那就是模板看起来很难, 其实不难; 异常看起来很简单,其实很难;多线程看起来很难,其实TMD更难。首先聊模板,talk is cheap,show me the

Servlet生命周期与工作原理_傻小子130的博客-程序员宅基地

转自:点击打开链接Servlet生命周期分为三个阶段:  1,初始化阶段  调用init()方法  2,响应客户请求阶段  调用service()方法  3,终止阶段  调用destroy()方法Servlet初始化阶段:  在下列时刻Servlet容器装载Servlet:    1,Servlet容器启动时自动装载某些Servlet,实现它只需要在web.XML文

自动更换Termux的源,加快软件包下载速度笔记_欧晨eli的博客-程序员宅基地_termux源地址

设置默认编辑器export EDITOR=nano 或export EDITOR=vim (若未安装vim,先安装:pkg install vim)编辑源文件apt edit-sources将原来的https://termux.net官方源替换为http://mirrors.tuna.tsinghua.edu.cn/termux————————————————uname -m 查看手机架构uname -a 查看版本信息源前面加上***[arch=all,手机架构]***最后更新一下

[GNN 教程]GCN_huanghelouzi的博客-程序员宅基地

更多图神经网络和深度学习内容请关注:引言这是我们介绍图神经网络的第一篇文章,取自Kipf et al. 2017,文章中提出的模型叫Graph Convolutional Network(GCN),个人认为可以看作是图神经网络的“开山之作”,因为GCN利用了近似的技巧推导出了一个简单而高效的模型,使得图像处理中的卷积操作能够简单得被用到图结构数据处理中来,后面各种图神经网络层出不穷,或多或少都受到这篇文章的启发。问题定义考虑图(例如引文网络)中节点(例如文档)的分类问题,假设该图中只有一小部分节点

18 个 Java8 处理日期的新花样,肯定没用过!_weixin_38754349的博客-程序员宅基地

code小生一个专注大前端领域的技术平台公众号回复Android加入安卓技术群作者:胖先森来源:juejin.im/post/5a795bad6fb9a0634f407ae5Java ...

持续集成之代码质量管理-Sonar [三]_sas???的博客-程序员宅基地

转载:https://www.abcdocker.com/abcdocker/2053摘要Sonar 是一个用于代码质量管理的开放平台。通过插件机制,Sonar 可以集成不同的测试工具,代码分析工具,以及持续集成工具。与持续集成工具(例如 Hudson/Jenkins 等)不同,Sonar 并不是简单地把不同的代码检查工具结果(例如 FindBugs,PMD 等)直接显示在 Web 页面上,而...

随便推点

flask之源码解读wtforms执行流程_Quincy379的博客-程序员宅基地

首先我们看下wtforms的创建from wtforms.form import Form# 引入Form元素父类from wtforms import StringField# 引入Form验证父类from wtforms.validators import DataRequiredclass LoginForm(Form): name = StringField(

数据库表及字段命名规范_柏修的博客-程序员宅基地

数据库设计表及字段命名规范(我整理的,望大家多多提建议)1.数据库表命名规范:(1)表名前应该加上前缀,表的前缀一个用系统或模块的英文名称缩写,前缀全部大写或首字母大写,表名中包含的单词首字母大写。(2)数据库表名应该有意义,并且易于理解,最好使用可以表达功能的英文单词或缩写,如果用英文单词表示,建议使用完整的英文单词。(3)表名不可以太长,最好不要超过

python3写入文件多余空行_Python2/Python3通过writerow写入csv文件会有多余的空行 及 bytes和str互相转换..._weixin_39632467的博客-程序员宅基地

Table of Contents前言项目需要,先处理txt文档,从中提取数值,然后将其转存为csv档来做数据分析。在存档为csv文件时出问题了,以下为我的经验总结,供各位参考。希望大家可以少走弯路。Python2代码Python2原来代码【有问题的】#!/usr/bin/envpython#-*-coding:utf-8-*-importcsvcsvRow=['01:01:00'...

C#如何回到主线程,如何在委托指定线程执行_嗯啦啦啦嗯的博客-程序员宅基地_c#切换到主线程

SynchronizationContext.Current 为获取当前线程的同步上下文,通过调用Send(同步)和Post (异步)将消息分派到同步上下文,以此实现在指定线程执行!!!this.Invoke为当拥有此控件的基础窗口句柄的线程上执行指定的委托。通过传递此委托,可以在类库里面调用,以此达到在多线程情况下,依然可以随时在主线程里执行委托Synchronizatio...

g723源码详细分析(-)_虎皮猫大人王的博客-程序员宅基地

完成了g723源代码的分析,现作一些整理1 信号高通滤波 Rem_Dc: 这个函数做高通滤波用的.将低频噪声滤除滤波器的系统函数为H(z)=(1-z^(-1)) / (1 - (127/128)*z^(-1))将 单位圆上的值代入(即:cos(a) + sin(a)*i)可以看出这个函数在π达到峰值,在 0 和 2π处是谷值,明显是高通滤波 迭代公式如下y[

css渐变 -moz-linear-gradient -webkit-gradient_iteye_13202的博客-程序员宅基地

css渐变 -moz-linear-gradient -webkit-gradientwebkit内核的safari、 Chrome的Linear Gradients (线性渐变) -Css3演示原创CSS88-webkit-gradient(linear,0% 0%, 0% 100%, from(#999999), to(#333333), color-stop(0.5,#336600))...