如何让HTMX的hx-get获取输入框inputValue值实现分页跳转

针对你遇到的无法在hx-get中动态获取输入框inputValue值的问题，提供以下几种可行方案：

方案1：使用htmx的hx-include（最简洁） #

给输入框添加name="page"属性，通过hx-include将输入框的值自动纳入请求参数：

<input type="number" name="page" x-model="inputValue" min="1" max="{{ page.paginator.num_pages }}"
       placeholder="Enter a number">
<button type="button" 
        hx-get="?"
        hx-include="[name='page']">Go</button>

原理 #

hx-include会指定要包含的表单元素，htmx在发送请求时会自动把该元素的name和value拼接成URL参数（GET请求）或表单数据（POST请求），无需额外JS逻辑。

方案2：结合Alpine.js动态修改hx-get属性 #

利用Alpine.js的事件监听，动态更新按钮的hx-get属性后触发请求：

<input type="number" x-model="inputValue" min="1" max="{{ page.paginator.num_pages }}"
       placeholder="Enter a number">
<button type="button" 
        x-data="{ inputValue: 1 }"
        x-on:click="$el.setAttribute('hx-get', '?page=' + inputValue); htmx.trigger($el, 'click');"
        hx-get="?page=1">Go</button>

原理 #

点击按钮时，先通过Alpine.js将按钮的hx-get属性更新为包含输入页码的URL，再手动调用htmx.trigger触发请求，确保请求使用最新的URL参数。

方案3：使用htmx的hx-vals动态传参 #

通过hx-vals直接引用Alpine.js的inputValue变量，动态传递页码参数：

<input type="number" x-model="inputValue" min="1" max="{{ page.paginator.num_pages }}"
       placeholder="Enter a number">
<button type="button" 
        hx-get="?"
        hx-vals='{"page": inputValue}'
        x-data="{ inputValue: 1 }">Go</button>

原理 #

hx-vals支持直接访问所在Alpine组件的变量，htmx会将指定的键值对添加到请求参数中，实现动态传参。

内容的提问来源于stack exchange，提问作者Adnan Nazir