在Django中使用HTMX发送多值请求时仅收到value的问题

方法1：修正hx-vals的引号与模板渲染问题 #

你当前使用"转义引号可能导致HTMX无法正确解析JSON结构。可以改用单引号包裹hx-vals内容，内部用双引号，避免Django模板的转义冲突：

<input type="text" name="value" value="{{ value }}" 
    class="editable-field bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-3/4 p-2.5" 
    hx-trigger="blur" 
    hx-headers='{"X-CSRFToken": "{{ csrf_token }}"}' 
    hx-post="{% url 'form' formId %}" 
    hx-vals='{"field": "{{ field }}", "value": "{{ value }}"}'>

如果仍有问题，可借助Django的json_script模板标签提前生成合法JSON，再在hx-vals中引用：

{% for field, value in data.items %}
    {% with field_val=field value_val=value %}
        {{ field_val|json_script:"field-{{ field }}" }}
        {{ value_val|json_script:"value-{{ field }}" }}
    {% endwith %}
    <div class='w-full h-28 p-1 m-5 flex flex-col mx-24'>
        <label for="{{ field }}" class="block mb-2 text-sm font-medium text-gray-900">{{ field }}</label>
        <input type="text" name="value" value="{{ value }}" 
            class="editable-field ..." 
            hx-trigger="blur" 
            hx-headers='{"X-CSRFToken": "{{ csrf_token }}"}' 
            hx-post="{% url 'form' formId %}" 
            hx-vals='js:{
                field: JSON.parse(document.getElementById("field-{{ field }}").textContent),
                value: JSON.parse(document.getElementById("value-{{ field }}").textContent)
            }'>
    </div>
{% endfor %}

方法2：使用hx-include包含隐藏字段 #

你已添加隐藏的input[name=field]，给它设置唯一ID后，用hx-include指定包含该字段，HTMX会自动将其值加入请求：

{% for field, value in data.items %}
    <div class='w-full h-28 p-1 m-5 flex flex-col mx-24'>
        <label for="{{ field }}" class="block mb-2 text-sm font-medium text-gray-900">{{ field }}</label>
        <input type="hidden" id="hidden-field-{{ field }}" name="field" value="{{ field }}">
        <input type="text" name="value" value="{{ value }}" 
            class="editable-field ..." 
            hx-trigger="blur" 
            hx-headers='{"X-CSRFToken": "{{ csrf_token }}"}' 
            hx-post="{% url 'form' formId %}" 
            hx-include="#hidden-field-{{ field }}">
    </div>
{% endfor %}

这种方式无需依赖hx-vals，直接利用HTMX的表单字段包含功能，避免JSON解析问题。

方法3：用JS表达式动态获取值 #

通过hx-vals的JS表达式语法，直接从DOM中获取隐藏字段的值，规避模板渲染变量问题：

<input type="text" name="value" value="{{ value }}" 
    class="editable-field ..." 
    hx-trigger="blur" 
    hx-headers='{"X-CSRFToken": "{{ csrf_token }}"}' 
    hx-post="{% url 'form' formId %}" 
    hx-vals='js:{field: this.previousElementSibling.value, value: this.value}'>

this.previousElementSibling指向当前input前的隐藏字段，直接取其value作为field参数，同时用当前input的value作为value参数，动态获取更灵活。

后端验证建议 #

后端可先打印完整POST数据，确认字段是否存在：

def post(self, request, formId):
    print("完整POST数据:", request.POST)
    field = request.POST.get('field')
    value = request.POST.get('value')
    print("获取到的字段:", field, value)

若仍有问题，可通过浏览器开发者工具的Network面板，查看HTMX请求的Payload，确认field是否被正确包含。

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