Thymeleaf中使用th:inline内联在JS代码中获取Model值不会更新的问题

最新推荐文章于 2024-09-19 08:43:24 发布
最新推荐文章于 2024-09-19 08:43:24 发布
阅读量553 收藏 1
点赞数
CC 4.0 BY-SA版权
分类专栏： Thymeleaf 文章标签： javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/weixin_42619772/article/details/116800854
本文介绍了在Thymeleaf模板引擎中遇到的问题：当Java后端更新Model值后，JavaScript代码无法获取到更新后的值。为解决此问题，文章提出了一种笨但有效的方法——通过在HTML页面中添加隐藏域，然后在JavaScript中读取这些隐藏域的值来获取最新数据。更新后的代码示例展示了如何实现这一解决方案。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

前言

最近在用Thymeleaf，发现使用th:inline内联在Js取出Model中的值后，如果Model中的值刷新了，JS中的值不会刷新，最后没办法，只能放弃了内联的使用，在页面加入了隐藏域。

问题

先放一下之前有问题的代码：

Js:

var currentTypeNum=[[${
   
   currentTypeNum}]]
var totalTypeNum=[[${
   
   totalTypeNum}]]

Java:

最低0.47元/天 解锁文章

200万优质内容无限畅学
【SpringBoot】3、SpringBoot中整合Thymeleaf模板引擎
Asurplus
04-16 21万+
SpringBoot 为我们提供了 Thymeleaf 自动化配置解决方案，所以我们在 SpringBoot 中使用 Thymeleaf 非常方便 一、简介 Thymeleaf是一个流行的模板引擎，该模板引擎采用Java语言开发，模板引擎是一个技术名词，是跨领域跨平台的概念，在Java语言体系下有模板引擎，在C#、PHP语言体系下也有模板引擎。除了thymeleaf之外还有Velocity、Fr...
Thymeleaf - 使用方法及国际化(超详细)
江南烟雨却痴缠丶
03-17 1万+
Thymeleaf简介 Thymeleaf是一个和Velocity、FreeMarker 类似的模板引擎，它在有网络和无网络的环境下皆可运行。因为它支持html原型，在html的标签里增加了额外的属性来达到模板+数据的展示方式。浏览器解释html时会忽略未定义的标签属性，所以thymeleaf的模板可以静态地运行。当有数据返回到页面时，Thymeleaf标签会动态地替换掉静态内容，使页面动态显示。...
SpringMVC使用Thymeleaf视图解析技术浏览器无法刷新前端页面
weixin_46666263的博客
09-15 640
SpringMVC使用Thymeleaf视图解析技术浏览器无法刷新前端页面
thymeleaf局部刷新数据
机智的爆爆哥
01-12 2308
效果是这样的 点击按钮 展示数据 为了便于理解 我还是截图吧 user类就两个数据 name 和age 代码送上 @PostMapping("test") public String aaa(Model model) { List<User> users = new ArrayList<>(); users.add(new User("bb", "11")); users.add(new User("cc",
使用thymleaf时在js中取值问题
一个菜鸟的提升路
11-30 2643
最近在使用springboot+thymleaf做项目，在使用thymleaf遇到了一些问题，记录一下。 问题一 使用thymleaf时，在js代码中取后台返回的值时，通常使用[[]${返回名称}]，当返回值是一个字符串的时候是没有问题的，但是如果返回值是一个对象，通过这种凡是取出来的是一个字符串，会导致对象中的值取不出来。 例如：返回的user是一个对象，可以这样取值：var user =...
SpringBoot——Thymeleaf中的th:inline（内敛文本text、内敛脚本javascript）
贝尔摩德苦艾酒
05-22 1万+
SpringBoot——Thymeleaf中的th:inline（内敛文本text、内敛脚本javascript）
th:inline=“javascript“
weixin_45390688的博客
09-24 876
在使用thymeleaf时，前端页面如要在javascript中获取后端传入的数据，需要在。
Thymeleaf高级用法：内联文本与脚本交互
通过设置`th:inline="javascript"`，我们能够在JavaScript脚本中直接引用Thymeleaf表达式的值。以下是一个示例： ```html <script th:inline="javascript"> var name=[[${userName}]]+',Sebastian'; alert(name);...
<th:block th:each="image, stats: ${imageList}"> <pkg:part pkg:name="/word/media/image_${stats.index}.png" pkg:contentType="image/png"> <pkg:binaryData>[[${image}]] </pkg:binaryData> </pkg:part> </th:block> 纠正以上代码中的thymeleaf语法
最新发布
07-31
在Thymeleaf中，迭代状态对象的使用方式是通过该变量名直接访问，例如`${stats.index}`，所以这里在属性值中使用`${stats.index}`是不正确的，因为我们在Thymeleaf属性中应该使用Thymeleaf的表达式语法，即`th:xxx`...
记录一次Thymeleaf th：inline内联问题
泡芙小姐yan的博客
10-30 3083
最近老大让我实现一个项目的国际化功能，大致就是支持项目页面一些固定框架的语言能支持中英文自由切换。所以需要前端跟后端的一些固定字段以及提示语以变量的形式嵌入。前端页面是用大家都很熟知的Thymeleaf渲染，这个东西的确非常好用~ 但是我之前只知道在html标签内通过th标签加${}或者#{}表达式访问变量数据，但是现在的需求需要在javascript代码块里访问变量数据，就去官网查了下，一看好像...
内联js th:inline标签
qq_42479987的博客
03-12 2441
内联js 内联文本：[[…]]内联文本的表示方式，使用时，必须先用th:inline=”text/javascript/none”激活，th:inline可以在父级标签内使用，甚至作为body的标签。内联文本尽管比th:text的代码少，不利于原型显示。 获取项目路径： <script th:inline="javascript" type="text/javascript"> var ctxPath = [[@{/}]]; var ctxPath = /*[[@{/}]]*/
thymeleaf的内联th:inline（在javascript访问model中的数据）
weixin_44248903的博客
09-19 305
thymeleaf的内联th:inline（在javascript访问model中的数据）
Thymeleaf踩坑（th:inline=“javascript“）
纯纯打工人
08-31 1万+
使用若依开发的时候对[[${xxxx.xxx}]]这样的写法已经见怪不怪了，但是在SSM项目中使用Thymeleaf里面的script就很顺手的写下了这个，但是报错，报undefind，这就是很莫名其妙了， 看network的返回值，数组是取到了，但是并没有取到像下面这种可以识别的UTF-8字符串 这就很纳闷了，研究了将近30分钟，反复对比之前的前端代码，终于找到了问题所在 th:inline="javascript"这是Thymeleaf中的内联写法，支持在javascript访问mode..
Thymeleaf中th:inline的用法，Thymeleaf在js代码中取出model的值，Thymeleaf内联[[]]
Scluis的博客
02-01 2331
前言 最近一直在使用thymeleaf，取后端的文本数据一直是用的th:text，今天才知道有个简单的写法，记录一下。 thymeleaf渲染数据 使用thymeleaf，我们可以做到先在页面中写好静态数据查看页面的效果，而当程序真正执行转发或重定向到该页面的时候，由thymeleaf帮我们从后台取出真实数据并渲染。 比如下边代码，我们查看静态页面的时候，h3中的内容是hello，而程序运行时，则会通过thymeleaf结合el表达式加载model中的数据进行显示 <h3 class="ui head
SpringBoot——Thymeleaf常见属性-th:inline内敛文本text、内敛脚本javascript
莫得感情得码农
10-12 900
引言 th:inline 有三个取值类型 (text, javascript 和 none)，值为 none 什么都不做，没有效果 内敛文本（th:inline=”text”）内敛文本表达式不依赖于 html 标签，直接使用内敛表达式[[表达式]]即可获取动态数据，但必须要求在父级标签上加 th:inline = “text”属性 内敛脚本（th:inline=”javascript”）th:inline=”javascript”在 js 代码中获取后台的动态数据 代码举例 内敛文本和内敛脚本
thymeleaf 语法——th:text默认值、字符串连接、th:attr、th:href 传参、th:include传参、th:inline 内联、th:each循环、th:with、th:if
热门推荐
猎人在吃肉
11-06 3万+
文章目录th:attr 的使用th:href URL链接中传参th:insert 、th:replace、th:include 代码片段引入时传参th:inline 内联th:inline="text" 文本内联th:inline="javascript" 脚本内联th:inline="none" 禁止内联 th:attr 的使用 th:attr 的用处就是把数据以属性值的保存起来。 多...
Thymeleaf系列【8】内联
记录知识、锤炼自我
07-21 1278
2 内联 12.1 表达式内联 尽管标准方言允许我们使用标签属性做几乎所有事情，但在某些情况下，我们更喜欢将表达式直接写入我们的 HTML 文本中。例如，我们可能更喜欢这样写： Hello, [[${session.user.name}]]! ...而不是这个： Hello, Sebastian! 在 Thymeleaf 中，[[...]]或之间的表达式[(...)]被视为内联表达式，在它们内部，我们可以使用任何类型的表达式，这些表达式在 ath:text或th:utext属性中也有效。 请注意， whil
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值