javascript中使用thymeleaf中的变量

最新推荐文章于 2024-06-18 14:24:56 发布
最新推荐文章于 2024-06-18 14:24:56 发布
阅读量3.1k 收藏 3
点赞数 3
文章标签： javascript thymeleaf
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_36573282/article/details/89402115
版权

在sprinboot中，后台通过Model 的addAttribute("variable_name",variable_val); 方法将该变量传递到前端。在前端的页面标签中使用${variable_name}就可以获得变量的值。

而在javascript中，如果想要获取到值，需要如下写法：

var user_name = "[[${user_name}]]";

外面的引号是必须的，否则会出现reference error 未定义的错误。 

 

qq_36573282
关注
  • 3
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
在JavaScript中使用Thymeleaf获取值
veeoni的博客
04-10 1126
重中之重！首先， 在script的标签上加 th:inline="javascript" 很有可能漏掉这一行，导致渲染JS后，没有把/* */去掉 然后，在需要使用Thymeleaf渲染的地方添加以下内容 /*[[@{/index}]]*/+"" 如下 <script th:inline="javascript"> $('#t_container').load(/*[[@{/index}]]*/+""); </script> Thymeleaf解析后的效果 <scrip
在Thymeleaf中的JavaScript里调用后端传递的变量的方法
qq_33982232的博客
04-06 4886
一句话回答就是: 用两个中括号括起来, 比如这样[[${page.isFirst()}]]就可以直接获取后端传来的page.isFirst()的值了~
js与thymeleaf结合，js获取thymeleaf变量
ouyang_ouba的博客
06-02 1万+
前段页面代码 <tr th:each="book : ${books}"> <td th:text="${book.author}"></td> <td th:text="${book.title}"></td> <td th:text="${book.url}...
Thymeleaf 全局变量
最新发布
幻影浪子
06-18 245
在Spring Boot中，我们可以使用ThymeleafViewResolver的addStaticVariable方法来添加全局变量。
thymeleaf与vue：thymeleaf把java对象渲染赋值给js变量、渲染js代码中的服务器请求路径
没有简介就是简介
05-26 1136
最近在做个练手的项目，想把thymeleaf和vue结合一起使用，但是又不想弄成前后端分离的项目，想法就是后端查询出数据之后，通过thmeleaf的渲染，把数据从java的对象的数据渲染到对应的JavaScript的变量的值，这样就可以使用vue来进行操作了。还有就是向在前端发送ajax请求到服务器，所以js代码中也需要thymeleaf来渲染请求路径，以至于在更改web项目根url之后，也能正常请求服务器。//后端中admins是一个List的list对象。
Thymeleaf模板，在HTML的JavaScript 中使用变量
qq_41901047的博客
06-18 3004
在HTML中将从后端传过来的数据使用在js脚本中，需要进行如下配置： <script th:inline="javascript"> var fs1 = [[${fs1}]]; console.log(fs1); var user = /*[[${user}]]*/ null; console.log(user) </script> Thymeleaf会自动将变量进行转换，同时将对象转换成json串，如上面的user对象，控制台打印出来的内容
Thymeleaf JS传递多个变量参数
鸟人的博客
11-06 951
thymeleaf中给JS函数传递多个变量参数 <button class="mini ui red basic button" th:onclick="del([[${stu.id}]],[[${currentPage}]]);">删除</button> function del(id,page){ // alert("id:"+id+",pageNum:"+page); if (confirm("确认要删除这条数据吗？")){
使用Thymeleaf模板时需要在js中获取值
YL_Mercy的博客
03-08 1067
有两种情况 1. 需要在js中获取java对象的某个字段 2. 需要在js中动态引用某路径 注意事项 这两种情况都需要在js代码部分加入：th:inline=“javascript”： <script type="text/javascript" th:inline="javascript"></script> 第一种情况： 需要在字段中带上[[]] 两个中括号进行取值，让Thymeleaf对这一段文本进行处理。 <script type="text/javascript"
thymeleaf3 中文翻译
05-23
Thymeleaf提供的标准方言是基于HTML5的，但是它的核心设计让它能够在XML文件中使用，并且可以创建可被浏览器作为静态原型渲染的模板。 在文档中，Thymeleaf的中文翻译参考手册详细介绍了Thymeleaf的基本概念、示例...
thymeleaf_3.0.5_中文参考手册.pdf
08-20
Thymeleaf 提供了局部变量的功能，例如变量的使用和显示等。 10. 属性优先级 Thymeleaf 提供了属性优先级的功能，例如设置任何属性的值、设置指定属性的值、一次设置多个属性的值等。 11. 注释 Thymeleaf 提供了...
thymeleaf 最新中文文档
07-04
10. **最佳实践**：文档可能还会包含如何在实际项目中使用Thymeleaf的最佳实践，包括模板设计原则、性能优化建议等。 学习并掌握Thymeleaf的最新中文文档，不仅可以提升开发效率，还能帮助开发者构建更优雅、更可...
Thymeleaf_3.0.5_中文参考手册
04-08
这部分详细解释了 Thymeleaf 中使用的标记选择器语法，这是理解和使用 Thymeleaf 的关键之一。 以上是对 Thymeleaf 3.0.5 中文参考手册的主要知识点总结，希望能够帮助读者更好地理解和掌握 Thymeleaf 的核心功能和...
thymeleaf_3_中文手册最新
12-10
Thymeleaf是一款强大的模板引擎，常用于Java应用中的服务器端渲染。它的最新版本，Thymeleaf 3，引入了一系列增强特性和优化，旨在提供更高效、更灵活的前端开发体验。本手册将深入探讨Thymeleaf 3的核心概念、语法...
三、thymeleaf基本语法
ouyangqing的专栏
10-04 813
三、thymeleaf基本语法
Thymeleaf模版--子页面单独引入CSS、JS文件
热门推荐
Eric的专栏
05-26 1万+
最近在项目中应用到了 Thymeleaf，想写一个通用的页面来方便开发。网上有两种方法一种是通过layout:fragment实现，另一种是通过th:replace或者th:include实现。但是都不能对子页单独引入 CSS、JS 文件，所以记录下自己的实现方法。 我是通过th:replace的带参数方法实现的： 这是我的目录结构 我们拿&lt;head&gt;&lt;/head&gt...
js文件中怎么使用thymeleaf标签_SpringBoot Thymeleaf使用教程（实用版）
weixin_39613839的博客
11-22 2042
原文地址：SpringBoot Thymeleaf使用教程（实用版）原文作者：yizhiwazi原文来源：简书使用Thymeleaf 三大理由：简洁漂亮 容易理解完美支持HTML5 使用浏览器直接打开页面不新增标签 只需增强属性学习目标快速掌握Thymeleaf的基本使用（五大基础语法+常用内置对象）使用教程温馨提示：Thymeleaf 最为显著的特征是增强属性，任何属性都可以通过th:xx 来完...
thymeleaf 传递数据到js变量
程序员
07-20 4323
thymeleaf js
前端笔记-thymeleaf发送数据给JavaScript变量（普通变量和List）
IT1995的博客
04-03 6866
比如这个情况，当使用echart的时候： 如下图： 下面给出thymeleaf发送List给JavaScript //入学手续界面 @GetMapping("/procedure") public String procedure(Model model){ model.addAttribute("someInfo", cardInfoDao....
在 JavaScript 文件中使用 Thymeleaf 语法
06-08
在 JavaScript 文件中使用 Thymeleaf 语法需要借助于服务器端的渲染，通过在服务器端解析模板并将变量的值渲染到模板中，然后将渲染好的 HTML 页面返回给客户端。 具体实现方法有以下几种： 1. 将 JavaScript 文件的内容嵌入到 HTML 页面中，使用 Thymeleaf 语法引用模板中的变量。例如： ``` <script th:inline="javascript"> var myVar = /*[[${myVar}]]*/ ''; // ... </script> ``` 此方法需要将 JavaScript 内容写在 HTML 页面中，不太灵活。 2. 将 JavaScript 文件的内容存储在模板中，使用 Thymeleaf 语法引用模板中的变量，然后在服务器端将模板渲染为 HTML 页面。例如： ``` // JS 模板文件 var myVar = /*[[${myVar}]]*/ ''; // 渲染模板并返回 HTML 页面 @GetMapping("/my-page") public String myPage(Model model) { model.addAttribute("myVar", "hello world"); return "my-page"; } ``` 此方法需要在服务器端进行模板渲染，适用于需要动态生成 HTML 页面的情况。 3. 将 JavaScript 文件的内容存储在独立的文件中，在服务器端使用 Thymeleaf 语法生成动态的 JavaScript 文件。例如： ``` // JavaScript 文件模板 var myVar = /*[[${myVar}]]*/ ''; // 渲染 JavaScript 文件并返回 @GetMapping("/my-script.js") public ResponseEntity<String> myScript(Model model) { String content = // 读取 JavaScript 文件模板并使用 Thymeleaf 渲染 HttpHeaders headers = new HttpHeaders(); headers.setContentType(MediaType.APPLICATION_JAVASCRIPT); return new ResponseEntity<>(content, headers, HttpStatus.OK); } ``` 此方法需要在服务器端生成动态的 JavaScript 文件，适用于需要动态生成 JavaScript 文件的情况。 无论采用哪种方法，在使用 Thymeleaf 语法时都需要确保在服务器端进行模板渲染，而不能直接在客户端访问 JavaScript 文件。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值