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 中并自动提交值，但它演示了这个概念。

请注意，您还可以使用 inherit 关键字来继承父级值以包含，并添加额外值：

<main hx-include="#hidden-input">
    ...
    <button hx-post="/example" hx-include="inherit, [name='email']">
        Post It!
    </button>
    Enter email: <input name="email" type="email"/>
</main>

最后，请注意，如果您包含一个非输入元素，则该元素中包含的所有输入元素将被包含。

Notes

• 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 最多只返回一个要包含的元素
• hx-include 将忽略禁用的输入