学习Thymeleaf遇阻：如何从外部JS文件获取Thymeleaf变量？

嘿，我完全懂你遇到的困扰——外部JS文件没法直接用Thymeleaf的变量语法，毕竟这些文件是浏览器直接加载的，不会经过Thymeleaf模板引擎的处理，所以/*[[${token}]]*/只会被当成普通注释。别担心，有几种实用的办法能帮你搞定这个问题，而且完全适配你处理Ajax响应的需求：

方法1：将Thymeleaf变量注入全局对象 #

这是最常用也最省心的方案。在你的HTML页面里，用内嵌的<script>标签（记得加th:inline="javascript"）把需要的变量挂载到全局的window对象上，之后外部JS就能直接访问这些变量了。

示例代码：

<!-- 在HTML页面中引入外部JS之前，添加这段内嵌脚本 -->
<script th:inline="javascript">
    // 把Thymeleaf变量封装到全局配置对象里，避免污染全局命名空间
    window.appSettings = {
        token: /*[[${token}]]*/ ''
    };
</script>
<!-- 引入你的外部JS文件 -->
<script src="/js/your-external-script.js"></script>

然后在你的外部JS文件中，就可以直接使用这个变量了：

// 处理Ajax响应时直接调用全局变量
function handleAjaxResponse(response) {
    const token = window.appSettings.token;
    // 这里写你的响应处理逻辑，比如用token验证响应有效性等
    console.log('使用Thymeleaf变量处理响应:', token, response);
}

方法2：用HTML元素的data属性存储变量 #

如果你不想污染全局命名空间，可以把Thymeleaf变量存在页面某个元素的data-*属性里，之后外部JS通过DOM获取这些值。

示例代码：

<!-- 比如把变量存在body标签上 -->
<body th:data-token="${token}">
    <!-- 页面内容 -->
</body>

外部JS中获取变量：

// 获取元素的data属性值
const token = document.body.dataset.token;

// 用于处理Ajax响应
function handleAjaxResponse(response) {
    console.log('使用data属性中的token处理响应:', token, response);
}

方法3：通过接口动态获取变量（适合动态场景） #

如果你的token需要动态刷新，或者不想在页面加载时就注入变量，可以写一个简单的后端接口专门返回这类配置，然后在外部JS里发起请求获取。

示例后端接口（以Spring Boot为例）：

@GetMapping("/api/config")
public Map<String, String> getConfig(@ModelAttribute("token") String token) {
    Map<String, String> config = new HashMap<>();
    config.put("token", token);
    return config;
}

外部JS中请求变量：

// 先获取配置变量，再处理Ajax响应
fetch('/api/config')
    .then(res => res.json())
    .then(config => {
        const token = config.token;
        // 这里可以调用处理Ajax响应的逻辑，传入token
        handleAjaxResponse(token);
    });

function handleAjaxResponse(token) {
    // 响应处理逻辑
}

需要强调的是：外部JS文件本身永远不会被Thymeleaf解析，所以直接在里面写Thymeleaf的变量语法是行不通的。上面的方法都是把变量从模板传递到外部JS的可行路径，根据你的需求，前两种方法应该就足够覆盖场景了，尤其是第一种全局变量的方式，上手最快、改动最小。

内容的提问来源于stack exchange，提问作者Basil Battikhi