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']">
        注册!
    </button>
    输入邮箱: <input name="email" type="email"/>
</div>

这个例子有些刻意，因为通常您会将这些元素放在form中自动提交值，但它演示了这个概念。

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

<main hx-include="#hidden-input">
    ...
    <button hx-post="/example" hx-include="inherit, [name='email']">
        提交!
    </button>
    输入邮箱: <input name="email" type="email"/>
</main>

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

注意事项

• hx-include 具有继承性，可以放置在父元素上
• 虽然hx-include具有继承性，但它从触发请求的元素开始评估。在使用find和closest等扩展选择器时容易混淆

  <div hx-include="find input">
      <button hx-post="/register">
          注册!
      </button>
      输入邮箱: <input name="email" type="email"/>
  </div>
  

  在上面的例子中，当点击按钮时，find input选择器从按钮本身开始解析，由于按钮没有任何input子元素，因此不会返回任何元素，在这种情况下会引发错误。
• 标准CSS选择器解析为document.querySelectorAll并可以包含多个元素，而find或next等扩展选择器最多只返回一个元素
• hx-include 会忽略禁用的输入元素