hx-boost

hx-boost 属性允许你 “boost” 普通锚点和表单标签以改用 AJAX。这具有 不错的后备，如果用户未启用 javascript，则站点将继续工作。

¥The hx-boost attribute allows you to “boost” normal anchors and form tags to use AJAX instead. This has the nice fallback that, if the user does not have javascript enabled, the site will continue to work.

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

¥For anchor tags, clicking on the anchor will issue a GET request to the url specified in the href and will push the url so that a history entry is created. The target is the <body> tag, and the innerHTML swap strategy is used by default. All of these can be modified by using the appropriate attributes, except the click trigger.

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

¥For forms the request will be converted into a GET or POST, based on the method in the method attribute and will be triggered by a submit. Again, the target will be the body of the page, and the innerHTML swap will be used. The url will not be pushed, however, and no history entry will be created. (You can use the hx-push-url attribute if you want the url to be pushed.)

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

¥Here is an example of some boosted links:

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

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

¥These links will issue an ajax GET request to the respective URLs and replace the body’s inner content with it.

以下是增强表单的示例：

¥Here is an example of a boosted form:

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

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

¥This form will issue an ajax POST to the given URL and replace the body’s inner content with it.

注释

¥Notes