用 HTML 属性驱动 AJAX——无需写 JavaScript,让超媒体重新成为应用架构的中心
htmx 由 Carson Gross 创建,核心思想极其简单:让所有 HTML 元素都能发出 HTTP 请求,让所有 HTTP 方法都能被 HTML 触发。通过在 HTML 标签上添加 hx-get、hx-post 等属性,任何元素都可以触发 AJAX 请求,服务器返回 HTML 片段,htmx 自动更新对应的 DOM 区域。
这个思路来自 Roy Fielding 博士论文中 REST 架构的核心概念——超媒体作为应用状态引擎(HATEOAS):服务器返回的 HTML 不仅是展示内容,也驱动着应用的下一步交互。这与主流 SPA 框架(前端负责状态管理,后端只提供 JSON API)的思路截然相反。
2023 年 htmx 在 GitHub Star 中排名第二,原因是越来越多的开发者意识到:并非所有 Web 应用都需要 React/Vue。对于以服务器渲染为主的应用(博客、管理后台、内容平台),htmx 提供了一条更简单的路径——服务器渲染 HTML,htmx 让它具备动态交互能力。
让 HTML 回归应用中心
hx-get/post/put/delete/patch,任何元素触发任意 HTTP 方法请求,无需 JS。
hx-target 指定更新目标,hx-swap 控制替换策略,精确更新页面任意区域。
hx-sse 原生支持 Server-Sent Events,轻松实现实时通知、进度更新。
hx-ws 支持 WebSocket 连接,ws-send 发送消息,实现双向实时通信。
配合 View Transitions API 或 CSS 动画,实现流畅的局部更新效果。
服务器只需返回 HTML,与 Flask/FastAPI/Go/Rails/Django/Laravel 无缝配合。
从超媒体哲学到全栈实战
REST 与 HATEOAS、传统 SPA 的问题、htmx 设计哲学、Roy Fielding 论文背景、安装与第一个示例。
AJAX 请求触发、HX-Request 请求头、服务器返回 HTML 片段、hx-boost 全局增强、hx-push-url 浏览器历史。
CSS 选择器目标、closest/find/next/previous 特殊选择器、innerHTML/outerHTML/beforeend 等替换策略、越界更新 hx-select-oob。
默认触发器、click/change/submit/revealed、修饰符 once/changed/delay/throttle/from、轮询 every 2s、懒加载 load。
htmx-indicator 加载指示器、hx-confirm 确认对话框、hx-disable 禁用处理、请求队列管理。
表单自动序列化、hx-include 额外数据、hx-vals 参数、文件上传 multipart/form-data、服务端验证与错误显示。
hx-sse 服务端推送、SSE 事件触发 htmx 请求、hx-ws WebSocket 连接、实时聊天、进度条更新。
Flask Blueprint + Jinja2、FastAPI + HTML 响应、Go html/template、Rails Hotwire 对比,正确的 Content-Type。
View Transitions API、htmx-settling/swapping/added CSS 类、自定义 swap 动画、_hyperscript 搭配、@keyframes 过渡。
Python FastAPI + htmx 完整 Todo 应用:新增/标记/删除/过滤/搜索、实时计数、乐观更新、部署到 Fly.io。