htmx 2.0

htmx

用 HTML 属性驱动 AJAX——无需写 JavaScript,让超媒体重新成为应用架构的中心

HTML 驱动
零依赖
局部更新
超媒体哲学
10核心章节
14KB极小体积
任意后端兼容

htmx 是什么?为什么它在 2024 年再次受到关注?

htmx 由 Carson Gross 创建,核心思想极其简单:让所有 HTML 元素都能发出 HTTP 请求,让所有 HTTP 方法都能被 HTML 触发。通过在 HTML 标签上添加 hx-gethx-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-* 属性

hx-get/post/put/delete/patch,任何元素触发任意 HTTP 方法请求,无需 JS。

🎯

局部 DOM 更新

hx-target 指定更新目标,hx-swap 控制替换策略,精确更新页面任意区域。

📡

SSE 实时推送

hx-sse 原生支持 Server-Sent Events,轻松实现实时通知、进度更新。

🔌

WebSocket

hx-ws 支持 WebSocket 连接,ws-send 发送消息,实现双向实时通信。

过渡动画

配合 View Transitions API 或 CSS 动画,实现流畅的局部更新效果。

🌍

后端无关

服务器只需返回 HTML,与 Flask/FastAPI/Go/Rails/Django/Laravel 无缝配合。

课程目录

从超媒体哲学到全栈实战

Chapter 01

htmx 哲学:HTML-first 与超媒体架构

REST 与 HATEOAS、传统 SPA 的问题、htmx 设计哲学、Roy Fielding 论文背景、安装与第一个示例。

HATEOAS超媒体哲学
Chapter 02

核心属性:hx-get/post/put/delete/patch

AJAX 请求触发、HX-Request 请求头、服务器返回 HTML 片段、hx-boost 全局增强、hx-push-url 浏览器历史。

hx-gethx-posthx-boost
Chapter 03

目标控制:hx-target 与 hx-swap

CSS 选择器目标、closest/find/next/previous 特殊选择器、innerHTML/outerHTML/beforeend 等替换策略、越界更新 hx-select-oob。

hx-targethx-swaphx-select
Chapter 04

触发器:hx-trigger 高级配置

默认触发器、click/change/submit/revealed、修饰符 once/changed/delay/throttle/from、轮询 every 2s、懒加载 load。

hx-trigger轮询懒加载
Chapter 05

指示器、确认与进度反馈

htmx-indicator 加载指示器、hx-confirm 确认对话框、hx-disable 禁用处理、请求队列管理。

indicatorhx-confirmUX
Chapter 06

表单增强与验证

表单自动序列化、hx-include 额外数据、hx-vals 参数、文件上传 multipart/form-data、服务端验证与错误显示。

表单验证文件上传
Chapter 07

SSE 与 WebSocket 实时更新

hx-sse 服务端推送、SSE 事件触发 htmx 请求、hx-ws WebSocket 连接、实时聊天、进度条更新。

SSEWebSocket实时
Chapter 08

与后端集成:Flask/FastAPI/Go/Rails

Flask Blueprint + Jinja2、FastAPI + HTML 响应、Go html/template、Rails Hotwire 对比,正确的 Content-Type。

FastAPIFlask后端集成
Chapter 09

过渡动画与 CSS 集成

View Transitions API、htmx-settling/swapping/added CSS 类、自定义 swap 动画、_hyperscript 搭配、@keyframes 过渡。

动画View TransitionsCSS
Chapter 10

全栈实战:构建 Todo 应用

Python FastAPI + htmx 完整 Todo 应用:新增/标记/删除/过滤/搜索、实时计数、乐观更新、部署到 Fly.io。

FastAPI实战Fly.io