Django+HTMX：输入框按Enter触发hx-get仅生效一次问题求助

核心原因 #

你遇到的问题源于GET请求缓存拦截和未传递输入参数两个关键点：

• HTMX默认会缓存GET请求的响应，你当前的hx-get使用固定URL，没有携带输入框内容作为参数，导致每次按Enter发送的请求完全一致，HTMX直接复用缓存结果，不会触发新请求。
• 同时，请求未将输入框内容传递给后端，即便请求能重复发送，后端也无法根据输入值返回对应内容。

解决方法 #

方法1：URL中携带输入参数（推荐）

修改hx-get属性，用HTMX变量语法把输入框值作为查询参数拼接到URL：

<input 
    id="code-input" 
    name="code-input" 
    hx-get="{% url 'get-partial-data' %}?code=${code-input.value}" 
    hx-trigger="keyup[key=='Enter']"
    hx-swap="outerHTML" 
    hx-target="#partial_data" 
    class="form-control" 
    type="text" 
    placeholder="Search by code">

每次输入不同内容，请求URL都会变化，既避免缓存拦截，又能把参数传给后端处理。

方法2：用hx-vals传递参数

保持hx-get为固定URL，添加hx-vals属性传递输入值：

<input 
    id="code-input" 
    name="code-input" 
    hx-get="{% url 'get-partial-data' %}"
    hx-vals='{"code": document.getElementById("code-input").value}'
    hx-trigger="keyup[key=='Enter']"
    hx-swap="outerHTML" 
    hx-target="#partial_data" 
    class="form-control" 
    type="text" 
    placeholder="Search by code">

HTMX会自动把hx-vals里的参数转为查询字符串附加到GET请求中。

方法3：禁用HTMX缓存（仅解决触发问题）

如果只是想让请求重复触发，暂时不传递参数，可添加hx-cache="false"强制禁用缓存：

<input 
    id="code-input" 
    name="code-input" 
    hx-get="{% url 'get-partial-data' %}" 
    hx-trigger="keyup[key=='Enter']"
    hx-swap="outerHTML" 
    hx-target="#partial_data"
    hx-cache="false"
    class="form-control" 
    type="text" 
    placeholder="Search by code">

但这种方式无法传递输入值，仅适合测试场景。

内容的提问来源于stack exchange，提问作者Manuel Ramos