hx-vals

hx-vals 属性允许您向将与 AJAX 请求一起提交的参数添加内容。

默认情况下，此属性的值是 JSON（JavaScript 对象表示法） 格式的名称-表达式值列表。

如果您希望 hx-vals 对给定的值进行评估，则可以在值前加 javascript: 或 js:。

  <div hx-get="/example" hx-vals='{"myVal": "My Value"}'>Get Some HTML, Including A Value in the Request</div>

  <div hx-get="/example" hx-vals='js:{myVal: calculateValue()}'>Get Some HTML, Including a Dynamic Value from Javascript in the Request</div>

使用评估代码时，您可以访问 event 对象。此示例包括输入中最后一个键入的键的值。

  <div hx-get="/example" hx-trigger="keyup" hx-vals='js:{lastKey: event.key}'>
    <input type="text" />
  </div>

您还可以使用扩展运算符来动态指定值。这允许您包含函数返回的对象中的所有属性。

  <div hx-get="/example" hx-vals='js:{...foo()}'>Get Some HTML, Including All Values from foo() in the Request</div>

在此示例中，如果 foo() 返回类似 {name: "John", age: 30} 的对象，则 name 和 age 都将作为参数包含在请求中。

安全注意事项

• 默认情况下，hx-vals 的值必须是有效的 JSON。它不是动态计算的。如果您使用 javascript: 前缀，请注意您正在引入安全注意事项，尤其是在处理用户输入（如查询字符串或用户生成的内容）时，这些输入可能会引入 跨站点脚本 (XSS) 漏洞。

备注

• hx-vals 是继承的，可以放置在父元素上。
• 子元素对变量的声明会覆盖父元素的声明。
• 具有相同名称的输入值将被变量声明覆盖。