HTMX使用指南

核心属性

属性说明
hx-get发送 GET 请求
hx-post发送 POST 请求
hx-put / hx-patch / hx-delete其他HTTP方法
hx-trigger触发请求的事件(默认:点击)
hx-target响应内容放置位置的CSS选择器
hx-swap插入方式:innerHTML、outerHTML、beforeend...
hx-include包含其他元素的值
hx-push-url推送URL到浏览器历史
hx-boost自动AJAX化所有链接/表单
hx-indicator加载时显示的元素

示例

<!-- 点击加载 --> <button hx-get="/api/users" hx-target="#list" hx-swap="innerHTML"> Load Users </button> <div id="list"></div> <!-- 表单提交 --> <form hx-post="/api/users" hx-target="#list" hx-swap="beforeend"> <input name="name" type="text"> <button type="submit">Add User</button> </form> <!-- 每2秒轮询 --> <div hx-get="/api/status" hx-trigger="every 2s">...</div> <!-- 带确认的删除 --> <button hx-delete="/api/users/1" hx-confirm="Delete this user?" hx-target="#user-1" hx-swap="outerHTML">Delete</button> <!-- 无限滚动 --> <tr hx-get="/api/users?page=2" hx-trigger="revealed" hx-swap="afterend"> Loading... </tr>

hx-swap 取值

取值效果
innerHTML替换内部HTML(默认)
outerHTML替换整个元素
beforebegin元素之前
afterbegin第一个子元素
beforeend最后一个子元素
afterend元素之后
delete删除元素
none不修改DOM