Spring Thymeleaf如何生成绑定输入框动态值的URL

th:href 是Thymeleaf在服务端渲染阶段就生成固定值的属性，模板运行在服务器上，无法直接读取用户在浏览器端实时输入的input内容，因此不能直接在Thymeleaf表达式中绑定动态输入的amount参数，以下是两种可直接落地的实现方案：

方案1：表单提交（推荐） #

带用户输入的请求用表单实现语义更合理，不需要手写JS拼接参数，浏览器会自动组装请求参数，还支持原生表单校验，代码如下：

<form th:action="@{/account/deposit}" method="get">
    <!-- 服务端渲染固定的id参数，用隐藏域存储 -->
    <input type="hidden" name="id" th:value="${account.id}">
    <!-- amount输入框name和后端参数名保持一致 -->
    <input type="number" name="amount" id="amount" min="0.01" step="0.01" required placeholder="请输入存款金额">
    <button type="submit">Deposit</button>
</form>

表单提交时会自动生成符合要求的GET请求地址，格式为/account/deposit?id=账户ID&amount=用户输入金额，完全匹配后端接口的参数绑定规则，required、min属性还能自动拦截空值、小于等于0的非法输入。

方案2：JS动态拼接a标签链接 #

如果必须保留a标签的实现形式，可以通过JS在点击跳转前实时获取输入值，拼接生成最终跳转地址：
首先修改HTML代码，把服务端可确定的id参数提前渲染到a标签href中：

<input type="number" id="amount" placeholder="请输入存款金额">
<a id="depositLink" th:href="@{/account/deposit(id=${account.id})}">Deposit</a>

添加如下JS逻辑：

const depositLink = document.getElementById('depositLink');
const amountInput = document.getElementById('amount');

depositLink.addEventListener('click', function(e) {
    e.preventDefault();
    const amount = amountInput.value.trim();
    // 基础参数校验
    if (!amount || Number(amount) <= 0) {
        alert('请输入大于0的存款金额');
        return;
    }
    // 拼接参数后跳转，对参数值做编码避免特殊字符异常
    window.location.href = `${this.href}&amount=${encodeURIComponent(amount)}`;
})

注意：不要尝试在th:href的表达式里直接写JS代码读取input值，Thymeleaf的模板表达式不会在浏览器端执行，这类写法完全无法拿到用户输入的内容。

内容的提问来源于stack exchange，提问作者Ersin Yılmaz Aslan