Spring Boot+Thymeleaf中hx-vals传递分页参数失效问题求助

问题根源分析 #

1. Thymeleaf 表达式格式错误：你尝试的hx-vals="${ {page: pageNum, size: pageSize } }"会将Map对象直接转为非标准字符串（格式为{page=1, size=20}），但HTMX需要的是标准JSON格式（{"page":1,"size":20}），导致服务器无法正确解析参数。
2. JS 上下文指向异常：在hx-vals="js:{}"的表达式中，this的指向不符合预期，改用HTMX内置的event变量可直接获取触发点击的元素。

方案一：Thymeleaf 直接生成合法JSON #

通过Thymeleaf字符串拼接，直接渲染出符合HTMX要求的JSON格式参数：

<a th:fragment="paging(pageNum, label, tooltip)"
   class="page-link"
   href="#"
   th:title="${tooltip}" rel="tooltip"
   hx-post="/mystuff/search"
   hx-trigger="click"
   hx-include="#searchform"
   hx-target="#results"
   th:attr="hx-vals='{&quot;page&quot;: ' + ${pageNum} + ', &quot;size&quot;: ' + ${pageSize} + '}'"
   hx-swap="outerHTML">
    [[${label}]]
</a>

说明 #

• th:attr用于动态设置hx-vals属性，通过字符串拼接生成标准JSON：
  • "是HTML转义的双引号，确保渲染后JSON格式合法
  • 直接将后端传入的pageNum和pageSize插入到JSON对应位置

方案二：使用HTMX的event变量获取参数 #

如果需要保留data属性的方式，改用HTMX内置的event变量获取触发元素的data属性：

<a th:fragment="paging(pageNum, label, tooltip)"
   class="page-link"
   href="#"
   th:title="${tooltip}" rel="tooltip"
   hx-post="/mystuff/search"
   hx-trigger="click"
   hx-include="#searchform"
   hx-target="#results"
   th:data-page="${pageNum}"
   th:data-size="${pageSize}"
   hx-vals='js:{ "page": event.target.getAttribute("data-page"), "size": event.target.getAttribute("data-size") }'
   hx-swap="outerHTML">
    [[${label}]]
</a>

说明 #

• 在HTMX的JS表达式中，event是全局可用变量，event.target指向当前被点击的<a>元素
• 无需依赖jQuery，直接用原生DOM方法获取data属性值

验证方法 #

点击分页链接后，在浏览器开发者工具的网络面板中查看请求参数：

• 检查page和size参数是否正确出现在请求体中（因为使用hx-post）
• 确认参数格式为数字类型（如果后端接收的是Integer，无需加引号）

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