htmx 响应目标扩展

此扩展允许你指定在收到不同的 HTTP 响应代码时要交换的不同目标元素。

¥This extension allows you to specify different target elements to be swapped when different HTTP response codes are received.

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

¥It uses attribute names in a form of hx-target-[CODE] where [CODE] is a numeric HTTP response code with the optional wildcard character at its end. You can also use hx-target-error, which handles both 4xx and 5xx response codes.

每个属性的值可以是：

¥The value of each attribute can be:

安装

¥Installing

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

¥The fastest way to install response-targets is to load it via a CDN. Remember to always include the core htmx library before the extension and enable the extension.

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

https://unpkg.com/htmx-ext-response-targets/dist/response-targets.js 上还有一个未缩小的版本。

¥An unminified version is also available at https://unpkg.com/htmx-ext-response-targets/dist/response-targets.js.

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

¥While the CDN approach is simple, you may want to consider not using CDNs in production. The next easiest way to install response-targets is to simply copy it into your project. Download the extension from https://unpkg.com/htmx-ext-response-targets, add it to the appropriate directory in your project and include it where necessary with a <script> tag.

对于 npm 样式的构建系统，你可以通过 npm 安装 response-targets：

¥For npm-style build systems, you can install response-targets via npm:

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 核心和项目特定代码打包在一起。

¥After installing, you’ll need to use appropriate tooling to bundle node_modules/htmx-ext-response-targets/dist/response-targets.js (or .min.js). For example, you might bundle the extension with htmx core from node_modules/htmx.org/dist/htmx.js and project-specific code.

如果你使用打包器来管理你的 javascript（例如 Webpack、Rollup）：

¥If you are using a bundler to manage your javascript (e.g. Webpack, Rollup):

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

配置（可选）

¥Configure (optional)

使用

¥Usage

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

¥Here is an example that targets a div for normal (200) response but another div for 404 (not found) response, and yet another for all 5xx response codes:

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

有时你可能不想分别处理 5xx 和 4xx 错误，在这种情况下你可以使用 hx-target-error：

¥Sometimes you may not want to handle 5xx and 4xx errors separately, in which case you can use 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 的内容。

¥2xx codes will be handled as in the previous example. However, when the response code is 5xx or 4xx, the response from /register will replace the contents of the div with the id any-errors.

通配符解析

¥Wildcard resolution

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

¥When status response code does not match existing hx-target-[CODE] attribute name then its numeric part expressed as a string is trimmed with last character being replaced with the asterisk (*). This lookup process continues until the attribute is found or there are no more digits.

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

¥For example, if a browser receives 404 error code, the following attribute names will be looked up (in the given order):

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

¥If you are using tools that do not support asterisks in HTML attributes, you may instead use the x character, e.g., hx-target-4xx.

注释

¥Notes

另请参阅

¥See also