如何在Thymeleaf HTML中获取可编辑变量最新值并回传至后端Controller

你当前的写法存在三个核心问题：

1. Thymeleaf 的 ${} 是服务端渲染阶段执行的表达式，只会在页面第一次加载时解析后端传递的初始值，不可能直接拿到用户在前端修改后的实时内容。
2. 你在 th:href 中直接调用 JS 函数的写法不会生效，th:href 是服务端生成链接的语法，解析完成后就固定了，不会触发客户端的 JS 逻辑。
3. 你写的 getVariable() 函数当前返回的是 DOM 元素本身，没有取到元素内的文本内容。

下面是两种可行的实现方案： #

方案1：点击按钮时用JS动态拼接参数跳转 #

这种方案改动最小，适合简单场景：
首先修改你的JS函数：

function saveChanges(itemCode) {
    // 读取修改后的内容
    const newDesc = document.getElementById('Description').textContent.trim();
    const newPrice = document.getElementById('price').textContent.trim();
    // 其他可编辑字段可以在这里统一读取
    // 拼接请求地址，用encodeURIComponent处理特殊字符避免参数出错
    const targetUrl = `/api/item/saveChanges?itemCode=${itemCode}&description=${encodeURIComponent(newDesc)}&price=${encodeURIComponent(newPrice)}`;
    window.location.href = targetUrl;
}

然后把原来的保存按钮部分的代码替换成下面的写法，不要用th:href拼接参数：

<input type="button" value="Save Changes" th:onclick="|saveChanges('${item.itemCode}')|" />

方案2：用Form表单提交（更规范，推荐） #

用GET请求提交数据修改不符合REST规范，也有参数长度限制，用POST表单提交更稳妥：
首先把你要提交的字段包裹在form标签内，增加隐藏字段存要提交的参数：

<form th:action="@{/api/item/saveChanges}" method="post">
    <!-- 隐藏字段存储固定参数和编辑后的内容 -->
    <input type="hidden" name="itemCode" th:value="${item.itemCode}">
    <input type="hidden" name="description" id="hiddenDesc">
    <input type="hidden" name="price" id="hiddenPrice">
    <!-- 其他需要提交的字段都可以对应加隐藏input -->

    <!-- 原来的展示和可编辑代码完全保留不用改 -->
    <div class="inset">
        <!-- 原有所有p标签、label、可编辑b标签都放这里 -->
    </div>

    <!-- 提交按钮 -->
    <p>
        <input type="submit" value="Save Changes" onclick="fillFormData()">
    </p>
</form>

增加JS函数在提交前给隐藏字段赋值：

function fillFormData() {
    document.getElementById('hiddenDesc').value = document.getElementById('Description').textContent.trim();
    document.getElementById('hiddenPrice').value = document.getElementById('price').textContent.trim();
    // 其他要提交的字段都在这里赋值就行
    return true;
}

后端Controller对应把saveChanges接口改成接收POST请求，参数名和form里的隐藏字段name保持一致即可自动接收。 #

注意事项 #

• contenteditable元素允许用户输入HTML标签，存在XSS注入风险，后端接收参数后一定要做内容过滤和校验再存入数据库。
• 如果不想页面跳转，可以用AJAX提交JSON数据，体验更流畅，原理和上面类似，读取内容后组装成请求体用fetch或者axios发POST请求即可。

内容的提问来源于stack exchange，提问作者Jesús Navarro Hernández