hx-vals

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

默认情况下，此属性的值是一个名称-表达式值列表，采用 JSON (JavaScript Object Notation) 格式。

如果您希望 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 是可继承的，可以放置在父元素上。
• 子元素对变量的声明会覆盖父元素的声明。
• 具有相同名称的输入值将被变量声明覆盖。
• 使用 javascript: 时，this 指代具有 hx-vals 属性的元素