htmx 是什么

htmx 让你直接在 HTML 里声明 AJAX 行为，无需编写 JavaScript。

加载更多按钮

<button hx-get="/posts/page/2"
        hx-target="#load-more"
        hx-swap="outerHTML">
    加载更多
</button>
  • hx-get：点击后发起的请求
  • hx-target：响应内容替换哪个元素
  • hx-swap：替换方式（outerHTML 表示整体替换）

实时搜索

<input type="search" name="q"
       hx-get="/search"
       hx-trigger="keyup changed delay:400ms"
       hx-target="#post-list">

输入停止 400ms 后自动发起请求，服务端返回渲染好的 HTML 片段即可。

小结

对于服务端渲染的网站，htmx 能以极低的成本带来接近 SPA 的体验。