hx-include

hx-include 属性允许你在 AJAX 请求中包含其他元素值。此属性的值可以是：

• 要包含的元素的 CSS 查询选择器。
• this 它将包括元素的子元素。
• closest <CSS selector> 它将找到与给定的 CSS 选择器匹配的最近的父元素或其自身（例如，closest tr将定位到离元素最近的 tr）。
• find <CSS selector> 它将找到与给定的 CSS 选择器匹配的第一个子元素。
• next <CSS selector> 它将向前扫描 DOM 以查找与给定 CSS 选择器匹配的第一个元素。（例如，next .error将定位到具有 error 类的最近的以下同级元素）
• previous <CSS selector> 它将向后扫描 DOM 以查找与给定 CSS 选择器匹配的第一个元素。（例如，previous .error将定位到具有 error 类的最近的前一个兄弟元素） 以下是包含单独输入值的示例：

<div>
    <button hx-post="/register" hx-include="[name='email']">
        Register!
    </button>
    Enter email: <input name="email" type="email"/>
</div>

这有点做作，因为您通常会将这两个元素包含在一个表单中并自动提交值，但它演示了这个概念。

请注意，如果包含非输入元素，则该元素中包含的所有输入元素都将被包含。

笔记

• hx-include可以继承并放置在父元素上

• 虽然 hx-include 是继承的，但它是从触发请求的元素中计算的。使用扩展选择器（如 find 和 closest）时，很容易感到困惑。 html <div hx-include="find input"> <button hx-post="/register"> Register! </button> Enter email: <input name="email" type="email"/> </div> 在上面的示例中，单击按钮时，将从按钮本身解析查找输入选择器，该选择器在此处不返回任何元素，因为按钮没有任何输入子项，因此在这种情况下，会引发错误。

• 标准 CSS 选择器解析为 document.querySelectorAll 时将包含多个元素，而扩展选择器（如 find 或 next ）最多只返回一个元素。