htmx 响应目标扩展

此扩展允许您指定不同的目标元素，当接收到不同的 HTTP 响应代码时进行交换。

它使用属性名称形式 hx-target-[CODE]，其中 [CODE] 是数字 HTTP 响应代码，并在末尾可选使用通配符字符。您也可以使用 hx-target-error，它处理 4xx 和 5xx 响应代码。

每个属性的值可以是：

要针对的元素的 CSS 查询选择器。
this，表示带有 hx-target 属性的元素是目标。
closest <CSS selector>，将找到匹配给定 CSS 选择器的最近的父祖先元素（例如，closest tr 将针对元素最近的表格行）。
find <CSS selector>，将找到匹配给定 CSS 选择器的第一个子后代元素。
next <CSS selector>，将向前扫描 DOM，找到匹配给定 CSS 选择器的第一个元素（例如，next .error 将针对具有 error 类的最近后续兄弟元素）。
previous <CSS selector>，将向后扫描 DOM，找到匹配给定 CSS 选择器的第一个元素（例如，previous .error 将针对具有 error 类的最近先前兄弟元素）。

安装

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

<head>
    <script src="https://cdn.jsdelivr.net/npm/htmx.org@2.0.7/dist/htmx.min.js" integrity="sha384-ZBXiYtYQ6hJ2Y0ZNoYuI+Nq5MqWBr+chMrS/RkXpNzQCApHEhOt2aY8EJgqwHLkJ" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/htmx-ext-response-targets@2.0.2" integrity="sha384-T41oglUPvXLGBVyRdZsVRxNWnOOqCynaPubjUVjxhsjFTKrFJGEMm3/0KGmNQ+Pg" crossorigin="anonymous"></script>
</head>
<body hx-ext="response-targets">
...

未压缩版本也可从 https://cdn.jsdelivr.net/npm/htmx-ext-response-targets/dist/response-targets.js 获取。

虽然 CDN 方法简单，但您可能需要考虑在生产环境中不使用 CDN。安装 response-targets 的下一个最简单方法是将它复制到您的项目中。从 https://cdn.jsdelivr.net/npm/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）：

通过 npm 安装 htmx.org 和 htmx-ext-response-targets
将两个包导入到您的 index.js

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

配置（可选）

当接收到 HX-Retarget 响应头时，它会禁用此扩展将执行的任何查找，但任何具有错误状态代码的响应将被交换（通常即使通过头设置目标也不会交换），并且内部错误标志（isError）将被修改。您可以通过将配置标志 htmx.config.responseTargetPrefersRetargetHeader 设置为 false（默认为 true）来更改此行为，并选择忽略 HX-Retarget 头，当 hx-target-… 存在时。请注意，此扩展仅执行简单的检查，以确定头是否设置以及目标是否存在。它不会从头中提取目标的值，而是信任它是由 HTMX 核心逻辑设置的。
通常，由 HTMX 内置函数或在此之前调用的扩展已建立的任何目标，如果找到匹配的 hx-target-… 标签，将被覆盖。您可以通过将配置标志 htmx.config.responseTargetPrefersExisting 设置为 true（默认为 false）来更改此行为。这是一个古怪且有风险的选项。它有类似于熟练的全栈水熊虫在无人观看时吃括号的实际应用。
与使用 hx-target-[CODE] 交换内容的关联事件的 detail 成员上的 isError 标志将在接收到错误响应代码时设置为 false。这与默认行为不同。您可以通过将配置标志 htmx.config.responseTargetUnsetsError 设置为 false（默认为 true）来更改此行为。
与使用 hx-target-[CODE] 交换内容的关联事件的 detail 成员上的 isError 标志将在接收到非错误响应代码时设置为 false。这与默认行为没有区别。您可以通过将配置标志 htmx.config.responseTargetSetsError 设置为 true（默认为 false）来更改此行为。此设置不会影响响应代码 200，因为它不由此扩展处理。

使用

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

<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">
Register!
</button>
<div id="serious-errors"></div>
<div id="not-found"></div>
</div>

来自 /register URL 的响应将在响应代码为 200（OK）时替换具有 id 为 response-div 的 div 的内容。
来自 /register URL 的响应将在响应代码以数字 5 开头时（服务器错误）替换具有 id 为 serious-errors 的 div 的内容。
来自 /register URL 的响应将在响应代码为 404（未找到）时替换具有 id 为 not-found 的 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">
Register!
</button>
<div id="any-errors"></div>
</div>

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

通配符解析

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

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

hx-target-404
hx-target-40*
hx-target-4*
hx-target-*。

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

注意事项

hx-target-… 是继承的，可以放置在父元素上。
hx-target-… 不能用于处理 HTTP 响应代码 200。
hx-target-… 默认会遵守 HX-Retarget，并优先于任何计算的目标，但可以通过禁用 htmx.config.responseTargetPrefersRetargetHeader 配置选项来更改。
为了避免意外，用于启用此扩展的 hx-ext 属性应放置在包含具有 hx-target-… 和 hx-target 属性的元素的父元素上。

另请参阅

hx-target，指定要交换的目标元素