Spring MVC控制器与JavaScript间模型传递异常问题

1. 修正Thymeleaf内联JavaScript的写法 #

很多时候是内联语法没写对，导致Thymeleaf没解析表达式。必须给<script>标签加上th:inline="javascript"属性，再用[[${}]]语法获取数据：

<script th:inline="javascript">
    var inputs = [[${inputs}]];
    console.log(inputs); // 正常会输出数组，比如["item1", "item2"]
</script>

• 别直接写var inputs = ${inputs};，这种写法不会被Thymeleaf解析，只会拿到字符串${inputs}或者null
• 确保属性名和控制器中model.addAttribute("inputs", ...)的键完全一致，大小写也不能错

2. 确认控制器数据存入正确 #

先排查后端代码，确保数据确实被放进Model：

@GetMapping("/test")
public String test(Model model) {
    List<String> inputList = Arrays.asList("testA", "testB", "testC");
    // 这里的键"inputs"要和前端对应
    model.addAttribute("inputs", inputList);
    return "test";
}

• 调试时可以打印model.asMap()，确认inputs属性存在且有数据，没被后续代码覆盖

3. 隐藏输入框方式的正确实现 #

如果用隐藏框传数据，必须把List转成标准JSON字符串，否则JSON.parse会失败：

<input type="hidden" id="inputsHidden" th:value="${#strings.escapeJavaScript(#json.stringify(inputs))}" />

<script>
    var inputStr = document.getElementById('inputsHidden').value;
    var inputs = JSON.parse(inputStr);
    console.log(inputs);
</script>

• 用#json.stringify()把List转成JSON格式，再用#strings.escapeJavaScript()处理转义，避免引号破坏HTML结构
• 直接写th:value="${inputs}"会得到List的toString结果（比如[testA, testB]），这不是合法JSON，JSON.parse会报错

4. 检查Thymeleaf基础配置 #

确认application.properties里的Thymeleaf配置没问题：

spring.thymeleaf.enabled=true
spring.thymeleaf.mode=HTML
spring.thymeleaf.cache=false # 开发环境关闭缓存，避免修改不生效

• 开发环境一定要关缓存，不然改了模板可能还是旧内容，导致数据看起来没传递

5. 确认模板文件位置正确 #

Thymeleaf默认模板目录是src/main/resources/templates/，确保test.html放在这个路径下，控制器返回的"test"能正确匹配到模板

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