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