hx-put

hx-put 属性将实现元素向指定的 URL 发出一个 PUT 请求，并使用交换策略将 HTML 交换到 DOM 中，常用于更新现有资源。

说明

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

基本语法

<button hx-put="/api/user/123" hx-target="#result">更新用户</button>

示例代码

前端 HTML

<form hx-put="/api/user/123"
      hx-target="#message"
      hx-swap="innerHTML">
  <input name="name" value="张三" />
  <input name="email" value="zhang@example.com" />
  <button type="submit">更新</button>
</form>

<div id="message"></div>

后台代码（Python Flask 示例）：

from flask import Flask, request

app = Flask(__name__)

@app.route("/api/user/<int:id>", methods=["PUT"])
def update_user(id):
    data = request.form  # 取表单数据
    name = data.get("name")
    email = data.get("email")
    # 处理更新逻辑
    return f"<span style='color:green;'>用户 {id} 已更新为 {name}, {email}</span>"