如何在htmx的hx-vals属性中正确传入变量？

嘿，我来帮你搞定这个htmx动态传参的问题！咱们分两种场景来解决：

场景1：获取服务器渲染的初始静态值（页面加载后不再变化） #

你之前用hx-vals='{"keyword":${keyword}}'的问题在于，Thymeleaf变量插值后会变成无引号的字符串（比如${keyword}是admin的话，最终会变成{"keyword":admin}），这不符合JSON格式，浏览器解析失败导致参数没传过去。

正确写法是把Thymeleaf变量用引号包裹，搭配Thymeleaf内联语法：

<div hx-trigger="load, every 15s"
     hx-get="/user-list"
     hx-vals='{"keyword":"[[${keyword}]]"}'
     hx-target="this"></div>

渲染后会生成合法的JSON{"keyword":"admin"}，就能正常携带参数了。

场景2：实时获取输入框的当前值（用户输入后自动更新参数） #

如果要每次请求都带上搜索框的最新输入值，就得用htmx的js:前缀写动态表达式。你之前用htmx.values()的方式不对，这个方法是用来获取整个表单/一组元素的键值对的，单个输入框直接取value属性就行：

<div hx-trigger="load, every 15s"
     hx-get="/user-list"
     hx-vals='js:{"keyword": htmx.find("#keyword").value}'
     hx-target="this"></div>

或者用原生JS写法也可以：

<div hx-trigger="load, every 15s"
     hx-get="/user-list"
     hx-vals='js:{"keyword": document.getElementById("keyword").value}'
     hx-target="this"></div>

这样每次触发请求时，都会自动读取搜索框的当前值并拼到请求参数里。

小提示 #

注意引号嵌套规则：hx-vals用单引号包裹时，内部JSON的属性值就用双引号，避免引号冲突导致解析错误。

备注：内容来源于stack exchange，提问作者azer-p