Thymeleaf链接按钮传参至@RequestParam为空问题求助

你遇到的核心问题其实是Thymeleaf的工作机制导致的：Thymeleaf是服务器端模板引擎，页面渲染完成后，${item.productId}的值就固定成了页面加载时后端item对象的初始值，不会随着前端输入框的内容变化而实时更新。所以你点击链接按钮时，传递的是空值（也就是页面加载时item.productId的初始状态），而非用户实际输入的内容。

为什么你的尝试都没效果？ #

你试过的三种URL写法：

th:href="@{/config/item/items/select(productId=${item.productId})}"
th:href="@{'/config/item/items/select'+${item.productId}}"
th:href="@{|/config/item/items/select${item.productId}|}"

本质都是在服务器端生成URL，只能拿到页面渲染瞬间item.productId的值，完全无法感知前端用户后续输入的内容，所以自然传不过去有效参数。

正确解决方案：用JavaScript动态获取输入值 #

要传递用户实时输入的内容，必须借助前端JavaScript来获取输入框的当前值，再拼接成正确的跳转URL。具体实现如下：

1. 修改链接按钮，去掉th:href，添加点击事件处理：

<a class="btn btn-success text-white btn-sm mr-3" style="border-radius: 16px;" onclick="handleSearch()">Search</a>

2. 编写对应的JavaScript函数，动态获取输入值并跳转：

<script>
function handleSearch() {
    // 获取输入框的实时值
    const productId = document.getElementById('productId').value;
    // 拼接URL并跳转，用encodeURIComponent处理特殊字符
    window.location.href = '/config/item/items/select?productId=' + encodeURIComponent(productId);
}
</script>

可选方案：改用表单提交（如果允许页面刷新） #

如果你能接受页面刷新的交互方式，也可以把搜索按钮改成表单提交按钮，让表单直接提交到查询接口：

<!-- 调整表单action为查询接口 -->
<form th:action="@{/config/item/items/select}" method="get" th:model="${item}">
    <!-- 原输入框保留 -->
    <div class="col-2 form-group" th:classappend="${#fields.hasErrors('item.productId')}? 'has-error':''">
        <label for="productId"><strong>Item id </strong></label>
        <input type="text" class="form-control" id="productId" name="productId" th:field="${item.productId}">
    </div>
    <!-- 把搜索按钮改成提交按钮 -->
    <button type="submit" class="btn btn-success text-white btn-sm mr-3" style="border-radius: 16px;">Search</button>
    <!-- 其他按钮保留 -->
</form>

这种方式会让表单提交时自动把输入框的productId参数传递到控制器，不需要额外写JS，但会触发页面刷新。

内容的提问来源于stack exchange，提问作者Gunther Umaña