hx-include

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

• 要包含的元素的 CSS 查询选择器。
• this它将包括元素的后代。
• 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） 以下是包含单独输入值的示例：

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

这有点做作，因为您通常会将这两个元素都放在一起form并自动提交值，但它演示了这个概念。

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

笔记

• hx-include可以继承并放置在父元素上
• 虽然是继承的，但它是从触发请求的元素进行评估的。使用扩展选择器（如和）hx-include 时很容易混淆。find closest

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

在上面的例子中，当单击按钮时，find input选择器从按钮本身解析，这里不会返回任何元素，因为按钮没有任何子input元素，因此在这种情况下会引发错误。

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