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">前往页面1</a>
<a href="/page2">前往页面2</a>
</div>
这些链接将向相应URL发起AJAX GET
请求,并用返回内容替换body的内部内容。
以下是增强表单的示例:
<form hx-boost="true" action="/example" method="post">
<input name="email" type="email" placeholder="输入邮箱...">
<button>提交</button>
</form>
此表单将向指定URL发起AJAX POST
请求,并用返回内容替换body的内部内容。
hx-boost
可被继承,可以放置在父元素上HX-Boosted
hx-boost="false"
可选择性禁用子元素的增强功能hx-preserve="true"
可禁用元素及其子元素的替换