核心特性 - HTMX 文档

🌐 AJAX 请求

任何 HTML 元素都可以发起 AJAX 请求：

html

<!-- GET 请求 -->
<button hx-get="/api/data">获取数据</button>

<!-- POST 请求 -->
<form hx-post="/api/submit">
  <input name="title">
  <button type="submit">提交</button>
</form>

<!-- PUT/DELETE -->
<button hx-put="/api/update">更新</button>
<button hx-delete="/api/delete">删除</button>

🎯 目标与交换

hx-target 指定目标

html

<button hx-get="/info" hx-target="#result">
  获取信息
</button>
<div id="result"></div>

hx-swap 交换方式

值	说明
innerHTML	替换目标内部（默认）
outerHTML	替换目标本身
beforebegin	在目标前插入
afterbegin	在目标内部开头插入
beforeend	在目标内部末尾插入
afterend	在目标后插入
delete	删除目标

🎨 CSS 过渡

HTMX 自动处理 CSS 过渡，无需 JavaScript：

html

<!-- 原始内容 -->
<div id="content">原始内容</div>

<!-- 服务器返回新内容 -->
<div id="content" class="fade-in">新内容</div>

css

.fade-in {
  animation: fadeIn 0.5s ease-in;
}

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

🔌 WebSocket & SSE

WebSocket

html

<div hx-ext="ws" ws-connect="/chat">
  <div id="messages"></div>
  <form ws-send>
    <input name="message">
  </form>
</div>

Server Sent Events

html

<div hx-ext="sse" sse-connect="/events">
  <div sse-swap="message">等待消息...</div>
</div>

📊 请求指示器

html

<button hx-get="/slow" hx-indicator="#loading">
  加载数据
</button>

<img id="loading" src="spinner.gif" 
     class="htmx-indicator">

css

.htmx-indicator {
  display: none;
}

.htmx-request .htmx-indicator {
  display: inline;
}

🔗 URL 历史

html

<!-- 将 URL 推入历史 -->
<a hx-get="/page/2" hx-push-url="true">
  下一页
</a>

<!-- 自定义 URL -->
<a hx-get="/page/2" hx-push-url="/article?page=2">
  下一页
</a>