Django表单提交时如何仅追加GET参数值而非重复键？

这个问题其实是浏览器原生表单提交的默认行为导致的——对于同名的多选控件，GET请求就是会生成key=val1&key=val2这种格式。要实现你要的单键多值（逗号分隔成key=val1%2Cval2）的URL参数，咱们得手动干预提交流程，用JavaScript来处理参数拼接。下面给你结合Django场景的具体实现方案：

1. 调整表单模板结构 #

先把你的复选框表单调整一下，给临时的name属性，避免和最终目标参数名冲突：

<form action="" method="GET" id="customForm">
  {% for s in status %}
    <label>
      <input type="checkbox" name="status_temp" value="{{ s.id }}">
      {{ s.name }}
    </label>
  {% endfor %}
  <button type="submit">筛选</button>
</form>

这里把原来的name="order_status__in"改成了status_temp，后面用JS处理时再替换成目标键名。

2. 用JavaScript拦截并处理表单提交 #

在模板里添加这段JS代码，替换浏览器的默认提交逻辑：

document.getElementById('customForm').addEventListener('submit', function(e) {
  // 阻止表单默认提交行为
  e.preventDefault();
  
  // 获取所有选中的复选框值，拼接成逗号分隔的字符串
  const selectedValues = Array.from(this.querySelectorAll('input[name="status_temp"]:checked'))
    .map(input => input.value)
    .join(',');
  
  // 构造URL参数对象
  const searchParams = new URLSearchParams();
  
  // 添加工后的order_status__in参数
  if (selectedValues) {
    searchParams.append('order_status__in', selectedValues);
  }
  
  // （可选）保留表单中其他输入控件的参数（如果有的话）
  // 比如文本框、单选框等，遍历添加到searchParams里
  
  // 跳转到拼接好参数的URL
  window.location.href = `${this.action}?${searchParams.toString()}`;
});

这样提交时，JS会把选中的状态值合并成1,2，然后URL编码后变成1%2C2，最终生成你想要的?order_status__in=1%2C2格式。

3. 后端视图处理参数 #

在Django视图里，你需要把接收到的逗号分隔字符串拆成列表，用于查询过滤：

def your_order_view(request):
    status_param = request.GET.get('order_status__in', '')
    queryset = Order.objects.all()
    
    if status_param:
        # 拆分逗号分隔的字符串为列表
        status_list = status_param.split(',')
        # 应用过滤条件
        queryset = queryset.filter(order_status__in=status_list)
    
    # 其他视图逻辑...
    return render(request, 'your_template.html', {'orders': queryset})

额外小提示 #

如果你的表单里还有其他需要保留的GET参数（比如分页参数），可以在JS里先解析当前URL的现有参数，再添加工后的order_status__in参数，比如：

// 先获取当前URL的参数
const existingParams = new URLSearchParams(window.location.search);
// 清空旧的order_status__in参数（如果存在）
existingParams.delete('order_status__in');
// 添加新的合并后参数
if (selectedValues) {
  existingParams.append('order_status__in', selectedValues);
}
// 最后跳转
window.location.href = `${this.action}?${existingParams.toString()}`;

这样就能保留其他已有的GET参数，同时更新筛选条件啦。

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