🌐 AJAX 属性

属性说明
hx-get发起 GET 请求
hx-post发起 POST 请求
hx-put发起 PUT 请求
hx-patch发起 PATCH 请求
hx-delete发起 DELETE 请求

🎯 目标属性

属性说明
hx-target指定响应内容的目标元素
hx-swap指定如何交换内容
hx-select从响应中选择特定内容
hx-select-oob选择额外要更新的元素

hx-target 值

html
<!-- CSS 选择器 -->
hx-target="#result"
hx-target=".container"

<!-- 关键字 -->
hx-target="this"     <!-- 当前元素 -->
hx-target="closest form"  <!-- 最近的 form -->
hx-target="next .result"  <!-- 下一个 .result -->
hx-target="find .item"    <!-- 子元素 .item -->

⚡ 触发属性

属性说明
hx-trigger指定触发请求的事件

触发器修饰符

html
<!-- 延迟触发 -->
hx-trigger="input delay:500ms"

<!-- 防抖 -->
hx-trigger="input throttle:1s"

<!-- 条件触发 -->
hx-trigger="click[validForm()]"

<!-- 只触发一次 -->
hx-trigger="load once"

<!-- 值变化时触发 -->
hx-trigger="change"

<!-- 进入视口时触发 -->
hx-trigger="revealed"

<!-- 组合触发 -->
hx-trigger="click, keyup[key==='Enter']"

📊 其他属性

属性说明
hx-headers添加请求头
hx-params控制发送哪些参数
hx-indicator请求指示器
hx-push-url将 URL 推入历史
hx-confirm确认对话框
hx-disable禁用 HTMX
hx-encoding表单编码类型
hx-ext启用扩展
hx-history历史记录配置
hx-include包含额外数据
hx-on内联事件处理
hx-preserve保留元素内容
hx-prompt提示输入
hx-replace-url替换当前 URL
hx-request请求配置
hx-sync同步请求
hx-validate表单验证
hx-vals添加额外值