hx-include

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

• 要包含的元素的 CSS 查询选择器。
• this，它将包含元素的后代。
• closest <CSS 选择器>，它将查找与给定 CSS 选择器匹配的 最近 的祖先元素或自身（例如，closest tr 将以元素为目标定位最近的表格行）。
• find <CSS 选择器>，它将找到与给定 CSS 选择器匹配的第一个子后代元素。
• next <CSS 选择器>，它将向前扫描 DOM，查找与给定 CSS 选择器匹配的第一个元素。（例如，next .error 将以元素为目标定位具有 error 类别的最近的后续同级元素）
• previous <CSS 选择器>，它将向后扫描 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 等扩展选择器最多只会返回一个要包含的元素