用途
htmx 交互模式用于以超媒体驱动的方式构建动态 Web 界面。其基本理念是 HTML-over-the-wire：由服务器渲染 HTML 片段，htmx 负责将这些片段交换到页面中。htmx 通过扩展 HTML 属性发起 AJAX 请求并替换内容，因此无需 JavaScript 即可实现局部更新。
主要能力与核心概念
htmx 通过属性扩展 HTML，使其能够发起 AJAX 请求并交换内容，无需 JavaScript。例如，点击按钮触发 GET /items，并将响应替换 #item-list 的内容：
<button hx-get="/items" hx-target="#item-list" hx-swap="innerHTML">
Load Items
</button>
<div id="item-list"></div>
关键属性包括：
| 属性 | 用途 | 示例 |
|---|---|---|
| hx-get | GET 请求 | hx-get="/api/items" |
| hx-post | POST 请求 | hx-post="/api/items" |
| hx-put | PUT 请求 | hx-put="/api/items/1" |
| hx-delete | DELETE 请求 | hx-delete="/api/items/1" |
| hx-target | 响应放置位置 | hx-target="#results" |
| hx-swap | 插入方式 | hx-swap="outerHTML" |
| hx-trigger | 触发时机 | hx-trigger="click" |
| hx-indicator | 加载指示器 | hx-indicator="#spinner" |
交换策略（Swap Strategies）包括：innerHTML（替换子元素，默认）、outerHTML（替换整个目标元素）、afterbegin（作为第一个子元素插入）、beforeend（作为最后一个子元素插入）、beforebegin（插入到目标之前）、afterend（插入到目标之后）、delete（移除目标）、none（不更新 DOM）。
常见交互模式
- 带防抖的搜索：输入框通过 hx-trigger="input changed delay:300ms" 触发请求，服务器返回 HTML 片段。
- 行内编辑：通过双击（hx-trigger="dblclick"）切换到编辑表单，提交时使用 hx-put 并把响应 outerHTML 替换；取消按钮可再请求查看模式。
- 无限滚动：在列表底部放置 hx-trigger="revealed" 的元素，服务器返回新条目和下一页触发元素。
- 懒加载：使用 hx-trigger="load"，先展示骨架加载器，再替换为真实内容。
- 带 URL 状态的活动搜索：使用 hx-push-url="true" 记录搜索状态。
- 确认对话框：使用 hx-confirm。
- 服务器发送事件：使用 hx-ext="sse" 与 sse-connect、sse-swap。
服务端模式
- 片段与整页响应：通过检查请求头 HX-Request 区分 htmx 请求（返回片段）与普通请求（返回整页）。
- 响应头：可设置 HX-Trigger（触发客户端事件）、HX-Retarget（重定向目标）、HX-Reswap（重设交换方式）。
- OOB（带外）交换：一个响应可同时更新多个元素，使用 hx-swap-oob="true"。
CSS 集成
可通过 .htmx-indicator、.htmx-request、.htmx-settling、.htmx-settled、.htmx-added 等类名控制加载指示器与过渡动画。
限制与反模式
资料列出的反模式包括：从 htmx 端点返回 JSON（应始终返回渲染后的 HTML 片段）、整页大范围替换（应返回小而精准的片段）、缺少加载指示（请求期间应始终提供反馈）、忽略非 htmx 请求（应支持整页加载以保证可收藏性）、在客户端管理状态（状态应保留在服务器端，让 HTML 成为状态）。