hx-boost

hx-boost 属性允许你 “提升” 普通锚点和表单标签以改用 AJAX。这有一个很好的后备方案,即如果用户没有启用 javascript,网站也能正常工作。

对于锚点标记,单击锚点将向 href 中指定的 url 发出 GET 请求,并推送 url 以创建历史记录条目。目标是 <body> 标签,默认情况下使用 innerHTML 交换策略。所有这些都可以通过使用适当的属性(单击触发器除外)进行修改。

对于表单,请求将根据 method 属性中的 method 转换为 GET 或 POST,并将由提交触发。同样,target 将是页面的正文,并且将使用 innerHTML 交换。但是,不会推送 URL,也不会创建任何历史记录条目。(如果要推送 URL,可以使用 hx-push-url 属性。

以下是一些增强链接的示例:

<div hx-boost="true">
  <a href="/page1">Go To Page 1</a>
  <a href="/page2">Go To Page 2</a>
</div>

这些链接将向相应的 URL 发出 ajax GET 请求,并用它替换正文的内部内容。

以下是增强形式的一个例子:

<form hx-boost="true" action="/example" method="post">
    <input name="email" type="email" placeholder="Enter email...">
    <button>Submit</button>
</form>

此表单将向给定的 URL 发出 ajax POST,并用它替换正文的内部内容。

笔记

  • hx-boost可以继承并放置在父元素上
  • 只有指向同一域且不是本地锚点的链接才会被提升
  • 所有请求都是通过 AJAX 完成的,因此在执行重定向等操作时请记住这一点
  • 要确定请求是否来自增强锚点或表单,请在 HX-Boosted 请求头中查找
  • 选择性地禁用子元素上的提升则使用 hx-boost="false"
  • 使用 boost 禁用元素及其子元素的替换 hx-preserve="true"