hx-post

hx-post 属性将向指定的 URL 发出一个 POST 请求，并使用交换策略将响应的 HTML 交换到 DOM 中。

基本语法

<button hx-post="/account/enable" hx-target="body">
  Enable Your Account
</button>

此示例中 button 发出 POST 请求并将 /account/enable 返回的 HTML 交换到 body 的 innerHTML。

说明

• hx-post不会被继承
• 你可以使用 hx-target 属性指定交换的目标
• 你可以使用 hx-swap 属性指定交换策略
• 你可以使用 hx-trigger 属性指定触发请求的事件
• 你可以通过多种方式控制随请求提交的数据，详情请参见此处：参数

hx-post 是 HTMX 中使用最多的一个属性之一，几乎所有的表单提交都用到 hx-post，配合 hx-include、hx-vals、hx-validate 等属性使用，几乎不需要编写 JavaScript 代码就能够轻松完成表单的校验及提交。

示例：提交评论但只刷新评论区

<form hx-post="/comments"
      hx-target="#comment-list"
      hx-swap="beforeend">
  <textarea name="content"></textarea>
  <button type="submit">评论</button>
</form>

<ul id="comment-list">
  <!-- 新评论将插入在这里 -->
</ul>