请求头
请求头（htmx 发送）
| HX-Request | htmx 请求始终为 "true" |
| HX-Target | 目标元素的 ID |
| HX-Trigger | 触发元素的 ID |
| HX-Trigger-Name | 触发元素的 name |
| HX-Current-URL | 浏览器当前 URL |
| HX-Prompt | hx-prompt 的用户输入 |
响应头（服务端发送）
| HX-Redirect | 客户端重定向到 URL |
| HX-Refresh | 值为 "true" 时整页刷新 |
| HX-Retarget | 覆盖 hx-target，用 CSS 选择器 |
| HX-Reswap | 覆盖 hx-swap 策略 |
| HX-Trigger | 触发客户端事件 |
| HX-Push-Url | 将 URL 推入浏览器历史 |
事件
生命周期事件
| htmx:configRequest | 请求前；可修改参数/头 |
| htmx:beforeRequest | AJAX 调用前 |
| htmx:afterRequest | 请求完成后 |
| htmx:beforeSwap | 内容替换前 |
| htmx:afterSwap | 内容替换后 |
| htmx:afterSettle | DOM 从替换中稳定后 |
| htmx:responseError | 服务器返回错误状态 |
监听事件
document.body.addEventListener("htmx:afterSwap", (e) => {
console.log("Swapped:", e.detail.target);
});
// Cancel a request
document.body.addEventListener("htmx:configRequest", (e) => {
if (!confirm("Proceed?")) e.preventDefault();
});
扩展
使用扩展
常用扩展
| json-enc | 将请求体编码为 JSON |
| loading-states | 管理加载状态 CSS 类 |
| head-support | 合并响应中的 标签 |
| preload | 鼠标按下/悬停时预加载链接 |
| sse | Server-Sent Events 支持 |
| ws | WebSocket 支持 |
| response-targets | 错误响应使用不同目标 |
加载指示器
加载指示器
Loading...
指示器 CSS
.htmx-indicator { display: none; }
.htmx-request .htmx-indicator { display: inline; }
.htmx-request.htmx-indicator { display: inline; }
请求期间 htmx 会给元素添加 htmx-request 类
请求期间禁用
hx-disabled-elt 在请求期间添加 disabled 属性
常用模式
实时搜索
无限滚动
| Loading more... |
带确认的删除
内联编辑