hx-vals

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

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

如果您希望hx-vals动态计算给定的值，可以在值前添加javascript:或js:前缀。

  <div hx-get="/example" hx-vals='{"myVal": "My Value"}'>获取包含请求值的HTML</div>

  <div hx-get="/example" hx-vals='js:{myVal: calculateValue()}'>获取包含JavaScript动态计算值的HTML</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()}'>获取包含foo()函数所有返回值的HTML</div>

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

安全考虑

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

注意事项

• hx-vals可被继承，可以放置在父元素上。
• 子元素声明的变量会覆盖父元素的声明。
• 同名输入值将被变量声明覆盖。
• 使用javascript:时，this指向具有hx-vals属性的元素