hx-get

hx-get 属性将元素向指定的 URL 发出一个 GET 请求，并使用交换策略将响应的 HTML 交换到 DOM 中。它是 HTMX 中最常见的用法之一，用来实现无刷新加载内容、局部页面更新、懒加载等功能。

基本用法

  <button hx-get="/example">Get Some HTML</button>

此示例中 button 发出 GET 并将 /example 返回的 HTML 交换到 button 的innerHTML 中。

说明

• hx-get不会被继承
• 默认情况下 hx-get 不包含任何参数。你可以使用 hx-params 属性来更改此设置
• 你可以使用 hx-target 属性指定交换的目标元素
• 你可以使用 hx-swap 属性指定交换策略
• 你可以使用 hx-trigger 属性指定触发请求的事件
• 你可以通过多种方式控制随请求提交的数据，详情请参见此处：参数
• 空的 hx-get:"" 将对当前 url 发出 get 请求，并将交换当前 HTML 页面

示例：页面加载时自动发送 GET 请求

<div 
  hx-get="/initial-data"
  hx-trigger="load"
  hx-target="#box">
</div>

<div id="box"></div>

示例：输入内容时自动搜索（延迟）

<input type="text"
       name="q"
       placeholder="搜索"
       hx-get="/search"
       hx-trigger="keyup changed delay:500ms"
       hx-target="#search-result"
       autocomplete="off" />

<div id="search-result"></div>