htmx 响应目标扩展

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

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

每个属性的值可以是：

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

安装

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

<head>
    <script src="https://cdn.jsdelivr.net/npm/htmx.org@2.0.6/dist/htmx.min.js" integrity="sha384-HGfztofotfshcF7+8n44JQL2oJmowVChPTg48S+jvZoztPfvwD79OC/LTtG6dMp+" 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-target-… 时忽略 HX-Retarget 头。请注意，此扩展仅执行简单的检查以确定头是否设置且目标存在。它不会从头中提取目标的值，而是信任它是由 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：

<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>

当响应代码为 200（OK）时，来自 /register URL 的响应将替换 id 为 response-div 的 div 的内容。
当响应代码以数字 5 开头（服务器错误）时，来自 /register URL 的响应将替换 id 为 serious-errors 的 div 的内容。
当响应代码为 404（未找到）时，来自 /register URL 的响应将替换 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">
注册！
</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，指定要替换的目标元素