HTMX中hx-post请求如何保留URL查询参数？

一、无需JS的HTML属性实现方法 #

针对你当前的查询参数场景，有两种直接通过HTMX属性解决的方式：

1. 用相对路径+hx-params自动携带查询参数 #

将表单的hx-post改为相对路径（去掉开头的斜杠），同时用hx-params指定要保留的查询参数：

<form hx-post="collections" hx-params="id">
</form>

• 相对路径collections会基于当前页面的路径/project，解析为/project/collections
• hx-params="id"会自动从当前页面的查询参数中提取id=someid，追加到请求URL末尾，最终请求地址就是/project/collections?id=someid

2. 服务器端渲染时直接拼接参数 #

如果你的页面是服务器端渲染的（比如用Django、Flask等），可以直接在hx-post属性中拼接完整的带参数URL：

<form hx-post="/project/collections?id={{ someid }}">
</form>

这种方式简单直接，适合后端能直接获取someid并填充到模板的场景。

二、更符合超媒体范式的最优方案 #

你提到最初期望的URL结构是/project/<id>和/project/<id>/collections，这才是超媒体驱动开发的最佳实践——用路径参数替代查询参数来标识资源：

1. 先调整页面URL为RESTful风格：example.com/project/someid
2. 表单只需使用简单的相对路径：

<form hx-post="collections">
</form>

此时浏览器会自动将相对路径解析为/project/someid/collections，完全不需要额外处理参数，完美契合HTMX倡导的"让HTML自身的路径规则工作"的范式。

超媒体开发的核心思路 #

从React转向HTMX这类超媒体工具，关键是转变思维：

• 尽量依赖相对路径和资源层级化的URL，而不是靠JS动态构建请求地址
• 让页面的URL本身就清晰表达资源关系，子资源的请求路径自然继承父资源的标识，无需手动传递参数

内容的提问来源于stack exchange，提问作者Nikola-Milovic