能否通过属性在hx-post请求中携带JSON请求体？

你完全不需要依赖表单来传递数据，HTMX支持通过属性直接携带JSON请求体，具体有两种常用方式：

• 使用hx-vals指定JSON数据
  搭配hx-headers设置请求的Content-Type为application/json，就能让请求体以JSON格式发送。示例代码：

  <button hx-post="/api/user" 
          hx-vals='{"username": "john_doe", "email": "john@example.com"}'
          hx-headers='{"Content-Type": "application/json"}'>
    提交用户信息
  </button>
  

  注意这里的JSON字符串要用单引号包裹，避免和HTML元素的双引号属性值冲突。

• 直接通过hx-body传递完整JSON
  如果需要传递更复杂的JSON结构，也可以直接用hx-body属性指定完整的JSON内容，同样要配合hx-headers设置Content-Type：

  <a href="#" hx-post="/api/order" 
              hx-body='{"items": [{"id": 1, "quantity": 2}, {"id": 3, "quantity": 1}], "total": 99.99}'
              hx-headers='{"Content-Type": "application/json"}'>
    提交订单
  </a>
  

另外，如果你的JSON数据需要动态生成，还可以通过JavaScript来设置请求体，比如利用HTMX的事件或者直接调用htmx.ajax()方法，但静态场景下用上述属性方式就足够灵活，完全不需要依赖表单元素。

内容的提问来源于stack exchange，提问作者Ben