Spring Boot中Thymeleaf模型传JS编译与运行结果不一致问题

核心原因 #

这种编译后与运行时JS变量不一致的情况，通常是因为AJAX请求返回的模板页面未被Thymeleaf正确重新渲染，或是浏览器缓存加载了旧的无变量注入的JS代码导致的。

具体解决方案 #

1. 确认模型变量正确传递到模板 #

检查/getCompiledPage接口的控制器逻辑：

• 确保inputs列表已正确添加到Model，代码示例：

  model.addAttribute("inputs", myPage.getInputs()); // 验证myPage.getInputs()非空且包含预期值
  

• 确认返回的templatePage模板中，带有th:inline="javascript"的脚本块属于模板的动态渲染部分，而非静态缓存片段。

2. 禁用AJAX请求缓存 #

浏览器缓存会导致返回旧页面覆盖新渲染内容，在AJAX请求中添加禁用缓存配置：

$.ajax({
  url: '/getCompiledPage',
  type: 'GET',
  data: { type: selectedType },
  cache: false, // 关键：禁止缓存请求结果
  success: function(html) {
    $('#targetContainer').html(html);
  }
});

3. 规范Thymeleaf内联脚本写法 #

避免变量被意外覆盖，确保脚本块内的变量注入逻辑正确：

<script th:inline="javascript">
  function start() {
    // 直接在函数内注入变量，避免全局变量被其他逻辑篡改
    var inputs = [[${inputs}]];
    console.log('inputs:', inputs);
  }
</script>

• 尽量不要将inputs声明为全局变量，防止其他脚本意外将其重置为null。
• 如果必须使用全局变量，需确保模板渲染时完成赋值，且后续无修改该变量的逻辑。

4. 验证页面片段插入逻辑 #

通过AJAX插入templatePage内容时，确保插入的是完整的、已渲染的脚本块，而非仅HTML结构，避免脚本未被正确加载。

5. 强制清除浏览器缓存 #

开发环境中可使用Ctrl+F5强制刷新页面，或禁用浏览器缓存，确保加载最新的渲染结果。

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