📦 安装方式

CDN（推荐快速体验）

html
<script src="https://unpkg.com/htmx.org@1.9.12"></script>

npm

bash
npm install htmx.org

下载文件

bash
# 下载到项目中
curl -o htmx.min.js https://unpkg.com/htmx.org@1.9.12/dist/htmx.min.js

🚀 第一个示例

html
<!DOCTYPE html>
<html>
<head>
  <script src="https://unpkg.com/htmx.org@1.9.12"></script>
</head>
<body>
  <!-- 点击按钮，从服务器获取内容 -->
  <button hx-get="https://httpbin.org/html" 
          hx-target="#result">
    点击获取内容
  </button>
  
  <div id="result"></div>
</body>
</html>

📝 基本用法

GET 请求

html
<button hx-get="/api/users">
  获取用户列表
</button>

POST 请求

html
<form hx-post="/api/users">
  <input name="name" placeholder="姓名">
  <input name="email" placeholder="邮箱">
  <button type="submit">创建用户</button>
</form>

触发事件

html
<!-- 点击触发（默认）-->
<button hx-get="/data">点击</button>

<!-- 加载时触发 -->
<div hx-get="/data" hx-trigger="load"></div>

<!-- 输入时触发 -->
<input hx-get="/search" hx-trigger="input">

<!-- 滚动到视口时触发 -->
<div hx-get="/more" hx-trigger="revealed"></div>

🔧 后端配合

HTMX 需要后端返回 HTML 片段：

Python Flask 示例

python
from flask import Flask, request

app = Flask(__name__)

@app.route('/search')
def search():
    q = request.args.get('q', '')
    # 返回 HTML 片段
    return f'<ul><li>结果1: {q}</li></ul>'

Node.js Express 示例

javascript
app.get('/search', (req, res) => {
  const q = req.query.q || '';
  // 返回 HTML 片段
  res.send(`<ul><li>结果1: ${q}</li></ul>`);
});

⚠️ 注意事项

  • 后端返回 HTML 片段，不是 JSON
  • 设置正确的 Content-Type: text/html
  • CORS：跨域请求需要配置 CORS
  • 调试：使用浏览器开发者工具查看网络请求