hx-boost
hx-boost
属性允许你“增强”普通的锚点和表单标签,使其使用 AJAX。这有一个很好的回退,如果用户没有启用 JavaScript,网站将继续工作。
对于锚点标签,点击锚点将向 href
中指定的 URL 发出 GET
请求,并将推送 URL,以便创建历史记录条目。目标是 <body>
标签,默认使用 innerHTML
交换策略。所有这些都可以通过使用相应的属性进行修改,除了 click
触发器。
对于表单,请求将根据 method
属性中的方法转换为 GET
或 POST
,并将由 submit
触发。同样,目标将是页面的 body
,并且将使用 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
请求,并用其替换 body 的内部内容。
以下是一个增强表单的示例。
<form hx-boost="true" action="/example" method="post">
<input name="email" type="email" placeholder="Enter email...">
<button>Submit</button>
</form>
此表单将向给定 URL 发出 AJAX POST
请求,并用其替换 body 的内部内容。
hx-boost
是继承的,可以放置在父元素上。HX-Boosted
。hx-boost="false"
选择性地禁用子元素上的增强。hx-preserve="true"
禁用通过增强替换元素及其子元素。