风小筝123 2023-03-22 22:32 采纳率: 47.4%
浏览 24
已结题

thymeleaf 外部js中如何访问变量

thymeleaf 外部js中如何访问变量？
thymeleaf 外部js中如何访问变量？
thymeleaf 外部js中如何访问变量？
thymeleaf 外部js中如何访问变量？

<script th:src="@{/static/pages/customer/customer_list.js}"></script>
  • 写回答

1条回答 默认 最新

  • pzzhao 2023-03-22 23:02
    关注

    该回答引用自ChatGPT

    在Thymeleaf中，要在外部JS中访问Thymeleaf变量，需要将变量的值传递给JS文件。可以使用data-*属性将变量的值存储在HTML元素中，然后在JS文件中使用getAttribute()方法获取这些值。以下是一个示例代码：
    在HTML文件中，将变量的值存储在一个data-*属性中：

    
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
  <title>Thymeleaf Example</title>
  <script th:inline="javascript">
    // 将变量的值存储在一个data-*属性中
    var customerId = [[${customerId}]];
    document.getElementById("customerId").setAttribute("data-customer-id", customerId);
  </script>
</head>
<body>
  <div id="customerId"></div>
  <script th:src="@{/static/pages/customer/customer_list.js}"></script>
</body>
</html>

    在JS文件中，使用getAttribute()方法获取变量的值：

    
// 获取data-customer-id属性的值
var customerId = document.getElementById("customerId").getAttribute("data-customer-id");
console.log(customerId);

    在这个示例代码中，我们首先将customerId变量的值存储在一个data-customer-id属性中，然后在JS文件中使用getAttribute()方法获取这个值，并将其输出到控制台中。请注意，为了确保JS文件在HTML文件中加载后才能执行，我们将JS文件的引入放在了HTML文件的最后。

    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论

报告相同问题？

  • thymeleaf_3.0.5_中文参考手册
    2018-10-19 17:11
    - **条件表达式**：类似于编程语言中的 `if-else` 结构。 - **默认表达式**（Elvis operator）：`? :` 运算符，用于提供默认值。 - **哑操作符号**：不执行任何操作的符号，如 `#`。 #### 五、设置属性值 - **设置...
  • Thymeleaf一篇就够了
    2020-07-24 14:35
    程序员bigsai的博客 目录什么是Thymleaf模板引擎介绍Thymleaf介绍第一个thymleaf程序thymleaf语法详解 什么是Thymleaf ...Thymleaf 官网是这么解释的：Thymeleaf is a modern server-side Java template engine for both web and
  • thymeleaf ajax的url,如何在Thymeleaf中实现ajax请求url的可靠构造?
    2021-08-06 09:31
    Wu Sean的博客 作为一个应用型码蚁，对jstl、freemaker、thymeleaf等等众多深感无奈……建立springboot应用时，模板中有一项是thymeleaf，springboot现在也是推荐使用这个，然而并没有时间仔细研究它……现在的问题是，ajax请求时...
  • Java编程06 -- Thymeleaf
    2020-05-02 19:54
    程序学者的博客 Thymeleaf简介官方网站 Thymeleaf是用来开发Web和独立环境项目的现代服务器端...可以在直接浏览器中正确显示，并且可以作为静态原型，从而在开发团队中实现更强大的协作。 借助Spring Framework的模块，可以根据自...
  • SpringBoot-Thymeleaf模板引擎整合及基本用法总结
    2020-09-10 09:26
    人间风，花间语的博客 SpringBoot-Thymeleaf模板引擎整合及基本用法总结(一) 模板引擎引入Thymeleaf内置方法常用标签 (一) 模板引擎引入 (1) 开发方式 在往常的开发中，一旦涉及到一个完整的前后端项目，有两种办法： 一种就是前后端分离...
  • JavaWeb笔记——JSP&&Thymeleaf
    2022-10-28 19:31
    小曹爱编程！的博客 JavaWeb笔记——JSP&&Thymeleaf JSP概述；JSP快速入门；JSP原理；JSP脚本；EL表达式；JSTL标签；MVC模式和三层架构；案例（增、改、查） Thymeleaf 扩展：使用springBoot写简单的二维码
  • Thymeleaf详解
    2022-05-13 12:11
    爱吃面的猫的博客 1Thymeleaf？ Thymeleaf 是一个 Java 库。它是一个 XML/XHTML/HTML5 模板引擎，能够将一组转换应用于模板文件，以显示应用程序生成的数据和/或文本。 它更适合在 Web 应用程序中提供 XHTML/HTML5，但它可以处理...
  • thymeleaf简明笔记
    2022-09-30 09:55
    道奇野猫的博客 SpringBoot2.0 使用模板布局需要引入 thymeleaf的 thymeleaf-layout-dialect依赖
  • Thymeleaf基本语法和使用
    2023-11-07 15:24
    2301_76541246的博客 启动项目进行测试，在浏览器上访问http://localhost:8080/toLoginPage，在页面底部动态...thymeleaf页面缓存设置（默认为true），开发中方便调试应设置为false，上线稳定后应保持默认true。#locale：上下文区域设置。
  • Java面试场景：深度剖析Thymeleaf、FreeMarker与JVM在健康管理系统中的应用
    2025-12-13 03:01
    日拱一卒的博客 本文通过模拟一次大厂Java面试，深度探讨了Thymeleaf、FreeMarker两大模板引擎以及Java 8 Stream API和JVM内存与GC在健康管理系统中的应用。文章以面试对话形式展开，包含面试实录、详细技术解析、代码示例及总结...
  • 没有解决我的问题, 去提问

问题事件

  • 系统已结题 3月31日
  • 已采纳回答 3月23日
  • 创建了问题 3月22日