hx-vals

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

默认情况下，此属性的值是JSON格式。

如果你希望 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 是继承的并可以放置在父元素上。
  • 变量的子声明将覆盖父声明。
  • 具有相同名称的输入值将被变量声明覆盖。