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 是可以繼承的，並且可以放置在父元素上。
• 子元素對變數的宣告會覆蓋父元素的宣告。
• 具有相同名稱的輸入值將會被變數宣告覆蓋。