htmx 响应目标扩展

此扩展允许您指定不同的目标元素，以便在收到不同的 HTTP 响应代码时进行内容替换。

它使用形如 hx-target-[CODE] 的属性名称，其中 [CODE] 是一个数字 HTTP 响应代码，末尾可以带有通配符。您还可以使用 hx-target-error，它可以处理 4xx 和 5xx 响应代码。

每个属性的值可以是：

安装

安装 response-targets 的最快方式是通过 CDN 加载。请记得始终在扩展之前包含核心 htmx 库，并启用扩展。

<head>
    <script src="https://app.unpkg.com/htmx.org@2.0.6/dist/htmx.min.js" integrity="sha384-HGfztofotfshcF7+8n44JQL2oJmowVChPTg48S+jvZoztPfvwD79OC/LTtG6dMp+" crossorigin="anonymous"></script>
    <script src="https://app.unpkg.com/htmx-ext-response-targets@2.0.2" integrity="sha384-T41oglUPvXLGBVyRdZsVRxNWnOOqCynaPubjUVjxhsjFTKrFJGEMm3/0KGmNQ+Pg" crossorigin="anonymous"></script>
</head>
<body hx-ext="response-targets">
...

未压缩版本也可在 https://app.unpkg.com/htmx.org@latest/files/dist/ext/response-targets.js 获取。

虽然 CDN 方法简单，但您可能需要考虑在生产环境中不使用 CDN。下一个最简单的安装 response-targets 的方法就是将其复制到您的项目中。从 https://app.unpkg.com/htmx-ext-response-targets 下载扩展，将其添加到项目的适当目录中，并在需要时使用 <script> 标签包含它。

对于 npm 风格的构建系统，您可以通过 npm 安装 response-targets：

npm install htmx-ext-response-targets

安装后，您需要使用适当的工具将 node_modules/htmx-ext-response-targets/dist/response-targets.js（或 .min.js）打包。例如，您可以将扩展与来自 node_modules/htmx.org/dist/htmx.js 的 htmx 核心以及项目特定代码一起打包。

如果您使用打包器管理 JavaScript（例如 Webpack、Rollup）：

import `htmx.org`;
import `htmx-ext-response-targets`;

配置（可选）

使用

以下是一个示例，针对正常（200）响应定位一个 div，针对 404（未找到）响应定位另一个 div，并针对所有 5xx 响应代码定位第三个 div：

<div hx-ext="response-targets">
<div id="response-div"></div>
<button hx-post="/register"
hx-target="#response-div"
hx-target-5*="#serious-errors"
hx-target-404="#not-found">
注册！
</button>
<div id="serious-errors"></div>
<div id="not-found"></div>
</div>

有时您可能不想分别处理 5xx 和 4xx 错误，这时可以使用 hx-target-error：

<div hx-ext="response-targets">
<div id="response-div"></div>
<button hx-post="/register"
hx-target="#response-div"
hx-target-error="#any-errors">
注册！
</button>
<div id="any-errors"></div>
</div>

2xx 代码将像前面的示例一样处理。但是，当响应代码为 5xx 或 4xx 时，来自 /register 的响应将替换 id 为 any-errors 的 div 的内容。

通配符解析

当状态响应代码与现有的 hx-target-[CODE] 属性名称不匹配时，其数字部分将作为字符串被修剪，最后一个字符被替换为星号（*）。此查找过程将持续到找到属性或没有更多数字为止。

例如，如果浏览器收到 404 错误代码，将按以下顺序查找属性名称：

如果您使用的工具不支持 HTML 属性中的星号，可以使用 x 字符代替，例如 hx-target-4xx。

注意事项

另请参阅