hx-boost

该hx-boost属性允许您“提升”普通锚点和表单标签以使用 AJAX。这有一个很好的后备方案，即如果用户未启用 javascript，网站将继续工作。

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

对于表单，请求将根据属性中的方法转换为GET或，并由触发。同样，目标将是页面的，并且将使用交换。但是，不会推送 url ，也不会创建历史记录条目。（如果您希望推送 url ，可以使用 hx-push-url 属性。）POST method submit body innerHTML

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

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

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

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

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

这个表单会POST向给定的 URL 发出一个 ajax 并用它替换主体的内部内容。

笔记

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