点击编辑

点击编辑模式提供了一种无需刷新页面即可内联编辑全部或部分记录的方式。

• 此模式从一个显示联系人详情的 UI 开始。该 div 包含一个按钮，将从 /contact/1/edit 获取联系人的编辑 UI

<div hx-target="this" hx-swap="outerHTML">
    <div><label>名字</label>: Joe</div>
    <div><label>姓氏</label>: Blow</div>
    <div><label>邮箱</label>: joe@blow.com</div>
    <button hx-get="/contact/1/edit" class="btn primary">
    点击编辑
    </button>
</div>

• 这将返回一个可用于编辑联系人的表单

<form hx-put="/contact/1" hx-target="this" hx-swap="outerHTML">
  <div>
    <label>名字</label>
    <input type="text" name="firstName" value="Joe">
  </div>
  <div class="form-group">
    <label>姓氏</label>
    <input type="text" name="lastName" value="Blow">
  </div>
  <div class="form-group">
    <label>邮箱地址</label>
    <input type="email" name="email" value="joe@blow.com">
  </div>
  <button class="btn" type="submit">提交</button>
  <button class="btn" hx-get="/contact/1">取消</button>
</form>

• 该表单向 /contact/1 发出 PUT 请求，遵循常规的 REST 模式。

🔗演示