Thymeleaf表单提交时如何传递文本框值及排序请求参数

方法1：使用隐藏域传递参数 #

直接将当前的sortField、sortDir、pageNo作为隐藏字段嵌入表单，提交时这些参数会自动随表单一起发送到后端。

<form th:action="@{/your-api-path}" method="get">
    <!-- 搜索关键词输入框 -->
    <input type="text" name="keyword" th:value="${keyword}" placeholder="输入搜索关键词"/>
    
    <!-- 隐藏域传递排序/分页参数 -->
    <input type="hidden" name="sortField" th:value="${sortField}"/>
    <input type="hidden" name="sortDir" th:value="${sortDir}"/>
    <input type="hidden" name="pageNo" th:value="${pageNo}"/>
    
    <button type="submit">搜索</button>
</form>

通过th:value把后端渲染到页面的参数值填充到隐藏域，确保提交时参数与当前页面状态一致。

方法2：通过Thymeleaf URL表达式拼接参数 #

如果用GET方法提交表单，直接在th:action的URL中拼接所有需要的参数，Thymeleaf会自动处理参数的编码与拼接。

<form th:action="@{/your-api-path(keyword=${keyword}, sortField=${sortField}, sortDir=${sortDir}, pageNo=${pageNo})}" method="get">
    <input type="text" name="keyword" th:value="${keyword}" placeholder="输入搜索关键词"/>
    
    <button type="submit">搜索</button>
</form>

注意：表单输入框的keyword值会覆盖URL中携带的keyword参数，保证提交的是用户最新输入的搜索词，同时保留原有排序、分页参数。

方法3：JavaScript动态拼接参数（复杂场景适用） #

如果需要在提交前动态处理参数（比如实时更新排序参数），可以监听表单提交事件，手动拼接所有参数后提交。

<form id="searchForm" th:action="@{/your-api-path}" method="get">
    <input type="text" id="keyword" name="keyword" th:value="${keyword}" placeholder="输入搜索关键词"/>
    <button type="submit">搜索</button>
</form>

<script>
document.getElementById('searchForm').addEventListener('submit', function(e) {
    e.preventDefault();
    
    // 从页面获取当前参数（可根据实际存储方式调整）
    const sortField = document.querySelector('[name="sortField"]')?.value || 'defaultField';
    const sortDir = document.querySelector('[name="sortDir"]')?.value || 'asc';
    const pageNo = document.querySelector('[name="pageNo"]')?.value || 1;
    const keyword = document.getElementById('keyword').value;
    
    // 构建完整请求URL
    const url = new URL(this.action);
    url.searchParams.set('keyword', keyword);
    url.searchParams.set('sortField', sortField);
    url.searchParams.set('sortDir', sortDir);
    url.searchParams.set('pageNo', pageNo);
    
    // 跳转提交
    window.location.href = url.toString();
});
</script>

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