1 介紹：HTMLX和現代Web開發
本書涵蓋：
- HTMLX的工作原理和使用場景
- 實例和範式
- 集成後端技術
從一個空的index.html文件開始，拷貝代碼示例。不炒作只專注技術本身！
1.1 HTMLX與其他庫對比
HTMLX與前端其他工具的不同：
- React/Vue/Angular:HTMX強調對HTML直接增強，比但應用框架更少以來JavaScript代碼
- Alpine.js: 雖然Alpine.js直接處理客户端交互，但HTMX專注於服務器端通信和DOM更新
- 原生JavaScript: HTMX消除了AJAX請求和DOM操作代碼
2 開始使用HTMX
本章介紹了HTMX的基礎知識。它涵蓋了項目中設置HTMX及創建HTMX元素。本章結束時，你將擁有一個功能完善的HTMX配置，並且瞭解其基本實現。
2.1 設置
利用CDN將HTMX添加到你項目中
<script src="https://unpkg.com/htmx.org@2.0.4"></script>
或者通過npm安裝：
npm install htmx.org
2.2 你的第一個HTMX元素
現在我們已經將HTMX集成到項目中，讓我們創建第一個HTMX元素。我們將從一個簡單的按鈕開始，當點擊時加載一些內容。
這是我們的HTML代碼：
<!DOCTYPE html>
<html>
<head>
<script src="https://unpkg.com/htmx.org@2.0.4"></script>
</head>
<body>
<button hx-get="/api/hello" hx-target="#message">
Say Hello
</button>
<div id="message"></div>
</body>
</html>讓我們來分析下代碼：
- 我們這裏有個按鈕元素，帶有兩個HTMX屬性：
hx-get和hx-target。 hx-get="/api/hello"告訴HTMX當點擊按鈕時，向"/api/hello"URL發起一個GET請求hx-target="#message"制定請求響應內容插入到id為"message"元素中
當你點擊該按鈕時，HTMX將向"/api/hello"發起一個GET請求，並將響應內容放入id為"message"的div中。
在幕後，HTMX為按鈕設置了一個事件監聽器。點擊時，它會發起一個AJAX請求，並將響應內容更新DOM。非常簡單！
2.3 理解HTMX屬性語法
HTMX使用HTML屬性來定義行為，其通用語法為：
hx-{action}="{value}"
我們來看看一些常用屬性：
2.3.1 hx-get:發起GET請求
<button hx-get="/api/data">Load Data</button>2.3.2 hx-post:發起POST請求
<form hx-post="/api/submit">
<input name="email" type="email">
<button type="submit">Subscribe</button>
</form>2.3.3 hx-trigger:指定觸發請求的時間
<div hx-get="/api/time" hx-trigger="every 60s">
<!-- 該內容將每60秒更新 -->
</div>2.3.4 hx-target:指定響應放置的位置
<button hx-get="/api/data" hx-target="#message-box">
Load Message
</button>
<div id="message-box">This is the message box</div>2.3.5 hx-swap:定義響應應如何替換
<button hx-get="/api/data" hx-target="#data-container" hx-swap="outerHTML">
Replace Container
</button>
<div id="data-container">Old content</div>2.3.6 hx-vals: 為請求添加額外值
<button hx-post="/api/echo"
hx-vals='{"product_id": 1234, "category": "shoes"}'>
Update Product Category
</button>這些屬性讓你能夠從HTML代碼中對你的Web應用行為進行強大的控制。
HTMX屬性提供以下功能：
- 發起各種類型的 HTTP 請求（GET、POST、PUT、PATCH、DELETE）
- 定位需要更新的元素
- 控制內容交換方式
- 處理表單提交
- 添加自定義頭部和參數
- 管理指示器和加載狀態
- 與服務器發送事件和 WebSocket 交互
- 更多……
讓我們通過一個小項目將所有內容整合起來：一個簡單的動態內容加載器。
這個例子演示：
1、使用hx-get發起GET請求
2、使用hx-target指定響應應插入的位置
3、使用hx-trigger來定義何時發起請求
4、使用hx-indicator來顯示加載狀態
在服務器端（使用Python），你可能有：
from random import choice
from flask import Flask, render_template
QUOTES = [
"The only way to do great work is to love what you do. - Steve Jobs",
"Innovation distinguishes between a leader and a follower. - Steve Jobs",
"Stay hungry, stay foolish. - Steve Jobs",
]
app = Flask(__name__)
@app.get("/")
def index():
return render_template("index.html")
@app.get("/api/quote")
def quote():
random_quote = choice(QUOTES)
return f"<blockquote>{random_quote}</blockquote>"
該請求將隨機獲取一條引言發送回客户端，本示例展示了使用HTMX進行簡單動態內容加載的場景。
3 HTMX核心概念
在本章中，我們將深入探討更多核心概念。
3.1 觸發器：讓事情發生
在HTMX中，觸發器是啓動動作的元素。它們定義了何時發起HTMX請求。默認情況下，觸發器取決於元素：
- 對於表單，使用的是提交事件
- 對於輸入框、選擇框和文本域，使用的變更事件
- 對於其他所有情況，使用的是點擊事件
不過HTMX允許你通過hx-trigger屬性來改變這一行為，我們看看示例：
<!-- Trigger on click (default for buttons) -->
<button hx-get="/api/data">
Load Data
</button>
<!-- Trigger on form submission (default for forms) -->
<form hx-post="/api/submit">
<input name="email" type="email">
<button type="submit">Subscribe</button>
</form>
<!-- Custom trigger: every 10 seconds -->
<div hx-get="/api/time" hx-trigger="every 10s">
<!-- Content will update every 10 seconds -->
</div>
<!-- Multiple triggers -->
<div hx-get="/api/data" hx-trigger="load, every 30s">
<!-- Content loads immediately and refreshes every 30 seconds -->
</div>