Thymeleaf 直接在 script 获取modelMap (或响应体)中的值

最新推荐文章于 2024-07-30 10:56:44 发布
最新推荐文章于 2024-07-30 10:56:44 发布
阅读量3.5k 收藏 3
点赞数 1
分类专栏： Thymeleaf  Html JS 文章标签： Thymeleaf  javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_42059737/article/details/87344542
版权
JS 同时被 3 个专栏收录
5 篇文章 0 订阅
订阅专栏
Html
4 篇文章 0 订阅
订阅专栏
Thymeleaf 
1 篇文章 0 订阅
订阅专栏

最主要的是   th:inline="javascript"

 Thymeleaf 模板引擎 使用JavaScript正确的方式

 


<script th:inline="javascript">
/*<![CDATA[*/
var cat = [[${cat}]];
var ent = [[${ent}]];
var tim = [[${tim}]];
/*]]>*/
</script>

 

 

墨落青衫
关注
  • 1
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
第11讲 使用ThymeLeaf模板实现数据修改
sinat_26814541的博客
11-13 1620
接 第10讲 使用ThymeLeaf模板实现查看页面 本案例，要实现数据修改。 1 新建修改数据页面 在src/main/resources目录的templates/product/文件夹中，新建html页面modify.html，代码如下： <!DOCTYPE html> <html xmlns:th="http://www.thymeleaf.org"> <hea...
在 thymeleaf网页中，js获取model中的数组列表.txt
10-10
在thymeleaf网页中，js获取后台model传递过来的对象很重要，这对减少数据库表操作代码的工作量，以及使前台开发更具灵活行怎么强调也不过分。获取model传过来的简单变量很简单，但是获取它传过来的对象不容易。 本例...
thymeleaf学习总结
晨港飞燕的专栏
11-19 4763
一.介绍 1.什么是thymeleaf Thymeleaf是现代化服务器端的Java页面模板引擎，不同于JSP和FreeMarker，Thymeleaf的语法更加接近HTML Thymeleaf是面向Web和独立环境的现代服务器端Java模板引擎。 Thymeleaf的主要目标是为您的开发工作流程带来优雅的自然模板 - 可以正确显示在浏览器中的HTML，也可以作为静态原型工作，从而在开发团队中...
前台js读取后端传值的两种方法(springboot-thymeleaf-javascript)
申龙青--五分钟以内讲清楚一个问题
02-16 4728
一 通过隐藏input元素传值 1.1 后台代码通过ModelAndView或Model类型返回 例1： @RequestMapping(value = "/list", method = RequestMethod.GET) public ModelAndView list(@RequestParam(value = "pageNum", defaultValue = "1") int pageNum, @RequestParam(value = "pageSize", defaultValue
Thymeleaf+Spring整合（官方文档翻译）
攻城狮Luke
08-10 8088
官方英文文档地址 https://www.thymeleaf.org/doc/tutorials/2.1/thymeleafspring.html 前言 这个教程介绍了Thymeleaf与Spring框架的集成，特别是SpringMvc框架。 注意Thymeleaf支持同Spring框架的3.和4.版本的集成，但是这两个版本的支持是封装在thymeleaf-spring3和thymelea...
Thymeleaf页面静态化
u014748504的博客
09-27 1013
了解Thymeleaf的基本使用 实现商品详情页的渲染 知道页面静态化的作用 实现页面静态化功能 1.商品详情 当用户搜索到商品，肯定会点击查看，就会进入商品详情页，接下来我们完成商品详情页的展示， 1.1.Thymeleaf 在商品详情页中，我们会使用到Thymeleaf来渲染页面，所以需要先了解Thymeleaf的语法。 详见课前资料中《Thymeleaf语法入门.md》 1.2.商品详情页服务 商品详情浏览量比较大，并发高，我们会独立开启一个微服务，用来展示商品详情。 1.2.1.创建module
springboot-thymeleaf
casepk的专栏
09-22 224
1，简介 Thymeleaf是用于Web和独立环境的服务器端Java模板引擎。它能够处理HTML、XML、JavaScript、CSS甚至纯文本。 Thymeleaf的主要目标是提供一种简洁的，具有更好可维护性的创建模板的方法。为了实现这一点，它基于自然的模板概念，在不影响被当做设计原型的模板的前提下，将它的逻辑注入到模板文件中。这样既改善了设计上的沟通，也弥合了设计与开发团队间的分歧。 T...
Thymeleaf+Spring整合
banjin7732的博客
10-08 617
前言 这个教程介绍了Thymeleaf与Spring框架的集成，特别是SpringMvc框架。 注意Thymeleaf支持同Spring框架的3.和4.版本的集成，但是这两个版本的支持是封装在thymeleaf-spring3和thymeleaf-spring4这两个独立的库中，项目中需要根据实际情况分别引用。 样例代码针对的是spring4.，但一般情况下，spring3.也可以无缝使...
SpringBoot框架:thymeleaf+mysql+MyBatis+Druid+Redis+Gradle详细配置
PLA12147111的博客
12-26 1100
目录 一.创建SpringBoot项目 二.配置热部署 三.目录结构 四.build.gradle配置(这里我使用的是war的方式部署的): 五.application.properties配置: 六.部分测试代码 七.SpringBoot导出war包方法: 一.创建项目 build.gradle文件提示: 二.配置热部署 热部署意思就是你改了代码不用...
spring与 thymeleaf 整合(转载)
愿世界和平
03-12 1829
前言 这个教程介绍了Thymeleaf与Spring框架的集成，特别是SpringMvc框架。 注意Thymeleaf支持同Spring框架的3.和4.版本的集成，但是这两个版本的支持是封装在thymeleaf-spring3和thymeleaf-spring4这两个独立的库中，项目中需要根据实际情况分别引用。 样例代码针对的是spring4.，但一般情况下，spring3.也可以无缝使用，所需要...
thymeleaf循环遍历集合并呈现在表格中
12-14
Thymeleaf是一个强大的模板引擎，它在Spring MVC等框架中广泛使用，可以用来替代传统的JSP技术。Thymeleaf允许开发者使用自然语言般的HTML模板来动态渲染内容，使得前端代码更加清晰、易于理解和维护。 在本例中，...
thymeleaf_3.0.5_中文参考手册.pdf
08-20
Thymeleaf 提供了多种方式来设置属性值，例如设置任何属性的值、设置指定属性的值、一次设置多个属性的值等。 6. 循环迭代 Thymeleaf 提供了循环迭代的功能，例如基本语法、保存迭代状态、通过数据懒加载进行迭代...
thymeleaf-3.0.5中文文档
11-07
这种静态模板和动态数据的分离，使得开发者可以在浏览器中直接查看和调试模板，而无需服务器支持。 文档中的"中文API"部分详细阐述了Thymeleaf的语法元素，如属性指令（attribute processors）、表达式语言...
thymeleaf 最新中文文档
07-04
Thymeleaf以其易于理解的语法和丰富的功能，使得HTML模板可以直接在浏览器中查看，同时也支持服务器端的动态处理。最新中文文档的发布，对于国内开发者来说，无疑提供了更方便的学习和参考资源。 文档内容可能包括...
Thymeleaf在JS中获取作用域(model)的值
墨落青衫
07-31 2834
// 注意这个script的属性 <script th:inline="javascript"> var single = [[${singlePerson}]]; </script>
Select下拉列在JS、Ajax、循环中如何拼接(添加元素)
墨落青衫
05-28 1642
JS:两种方式 一种是直接追加 $.ajax({ type: "POST", url: "user/getUserPostAndRole.action", data: { user_type: user_type}, async: true, ...
JS控制显示隐藏某段代码块
墨落青衫
07-31 1211
显示隐藏某段代码块htmlJS html <span id='vip_user_input'> hello</span> JS var userType =2; if (userType == 2) { // 显示 //获取要显示的div对象 var otherDiv = do...
VUE3自定义指令防止重复点击多次提交
最新发布
MadSnail00的博客
07-30 256
vue3连续点击按钮重复提交，vue3自定义指令防止重复提交
在<script></script>中怎么使用 Thymeleaf 的语法来获取 ModelMap 中的List类型数据
06-01
在 `<script>` 标签中使用 Thymeleaf 的语法获取 ModelMap 中的 List 类型数据，可以使用 `th:inline="javascript"` 属性开启 JavaScript 内联模式，然后使用 `[# th:each]` 指令进行循环遍历。比如，假设 ModelMap 中存储了一个名为 `users` 的 List 对象，可以使用以下方式获取该 List 中的数据： ``` <script th:inline="javascript"> // 定义一个 JavaScript 数组 var users = []; // 使用 Thymeleaf 循环遍历 ModelMap 中的 List 对象 /*[# th:each="user : ${users}"]*/ // 将每个用户对象转换成 JavaScript 对象，并添加到数组中 var userObj = { id: /*[[${user.id}]]*/, name: /*[[${user.name}]]*/, age: /*[[${user.age}]]*/ }; users.push(userObj); /*[/]*/ // 打印 JavaScript 数组 console.log(users); </script> ``` 在以上代码中，我们使用 `th:inline="javascript"` 属性开启了 JavaScript 内联模式，然后使用 `[# th:each]` 指令遍历了 ModelMap 中的 `users` List 对象，将每个用户对象转换成了 JavaScript 对象，并添加到了 `users` 数组中。在 `var userObj = {...}` 表达式中，我们使用了 `${}` 表达式语言来获取每个用户对象中的属性值，其中 `user.id`、`user.name`、`user.age` 分别对应 List 中每个用户对象的 id、name、age 属性。最后，我们将 `users` 数组打印到控制台中。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值