SpringBoot整合Thymeleaf双向绑定：修改输入值后模型数据未同步更新

核心误区是对Thymeleaf的运行机制理解错误：

• Thymeleaf是纯服务端模板引擎，没有前端和后端内存数据自动双向同步的能力。你写的GET接口逻辑执行完、Thymeleaf把模板渲染成静态HTML返回给浏览器之后，这次请求的生命周期就结束了，存在Model里的myMap对象随请求销毁，后端根本没有一个常驻的myMap对象等着和前端同步。
• 你写的th:value="${myEntry.getValue()}"只在服务端渲染阶段生效：渲染时把Map里的value填到input标签的value属性里，返回给浏览器之后，这个input就是普通的HTML元素，你在浏览器里改输入框内容只是改了本地页面的DOM，没有主动发HTTP请求把新值传给后端，后端完全感知不到前端的修改，自然不可能更新数据。

另外你贴的后端代码里连续两次put同一个keyfield1属于冗余代码，HashMap同key后写入的值会覆盖前一个，最终Map里只会保留一个field1键值对，和双向绑定问题无关但可以删掉。

要实现输入值和后端数据的绑定，本质是要在前端修改完数据后，主动把新值通过HTTP请求传给后端，Thymeleaf场景下最常用的是表单提交方案，步骤如下：

1. 后端接口调整 #

需要两个接口：一个GET接口负责初始渲染页面，一个POST接口负责接收提交的表单数据，Spring可以自动把表单参数绑定到Map对象上：

@Controller
public class PageController {

    // 初始页面渲染接口
    @GetMapping("/")
    public String renderMainPage(Model model) {
        Map<String, String> myMap = new HashMap<>();
        myMap.put("field1", "value1");
        model.addAttribute("myMap", myMap);
        return "index";
    }

    // 表单提交处理接口
    @PostMapping("/update")
    public String handleUpdate(@RequestParam Map<String, String> updatedMap, Model model) {
        // updatedMap就是前端提交上来的修改后的键值对，已经自动完成绑定
        // 这里可以加自己的业务逻辑，比如参数校验、持久化存储
        System.out.println("收到修改后的数据：" + updatedMap);
        // 处理完成后把最新数据传回页面渲染
        model.addAttribute("myMap", updatedMap);
        return "index";
    }
}

2. 前端模板调整 #

外层套form标签指向提交接口，给每个input设置和Map key对应的name属性，这样提交时后端才能正确识别每个输入框对应的key：

<form th:action="@{/update}" method="post">
    <div class="nav" th:each="myEntry:${myMap}">
        <label th:text="${myEntry.getKey()}"></label>
        <!-- th:name设置为Map的key，th:value填充初始值 -->
        <input th:name="${myEntry.getKey()}" th:value="${myEntry.getValue()}">
        <button class="btn" type="submit">Trigger</button>
    </div>
</form>

如果你不想点击按钮后整页刷新，可以把按钮改回原来的onclick触发逻辑，在自定义的trigger()方法里收集所有输入框的键值对，通过AJAX发POST请求给/update接口即可，核心逻辑还是要主动把修改后的数据传给后端，不存在不发请求就自动同步后端数据的可能。

补充：不要把Thymeleaf和Vue、React这类前端框架的能力搞混，Thymeleaf所有的th:*属性解析都在服务端完成，返回给浏览器的是纯静态HTML，没有内置的前端数据监听、自动同步后端的逻辑。

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