hx-boost

hx-boost属性允许您将普通锚点和表单标签"增强"为使用AJAX请求。这具有优雅降级特性:如果用户禁用了JavaScript,网站仍能正常工作。

对于锚点标签,点击锚点将向href指定的URL发起GET请求,并推送URL以创建历史记录。默认目标是<body>标签,并使用innerHTML替换策略。除了click触发器外,所有这些都可以通过相应属性进行修改。

对于表单,请求将根据method属性转换为GETPOST,并由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的内部内容。

注意事项