如何在一个Django视图中使用多个GET表单？

当页面存在多个独立GET表单时，默认提交其中一个会覆盖URL查询参数，导致其他表单的数据丢失。以下是两种实用的解决思路：

方法一：前端JavaScript合并所有表单参数 #

这种方法能保持表单的独立布局，提交任意一个表单时自动收集所有表单的有效数据，合并到URL中：

1. 给表单添加标识（可选，方便元素选择）：

<form id="form1"> {{form1}} <button>Send1</button> </form>
<form id="form2"> {{form2}} <button>Send2</button> </form>

2. 添加JavaScript处理提交事件：

// 监听所有表单的提交行为
document.querySelectorAll('form').forEach(form => {
  form.addEventListener('submit', (e) => {
    e.preventDefault(); // 阻止默认表单提交
    
    // 初始化FormData用于收集所有表单字段
    const combinedData = new FormData();
    
    // 遍历页面所有表单，筛选有效字段加入集合
    document.querySelectorAll('form').forEach(f => {
      Array.from(f.elements).forEach(element => {
        // 跳过提交按钮，仅处理带名称的表单元素
        if (!element.name || element.type === 'submit') return;
        
        // 复选框/单选框仅收集选中状态的选项
        if (['checkbox', 'radio'].includes(element.type)) {
          if (element.checked) {
            combinedData.append(element.name, element.value);
          }
        } else {
          // 处理输入框、下拉框等常规元素
          combinedData.append(element.name, element.value);
        }
      });
    });
    
    // 将合并后的参数转为查询字符串，跳转至目标页面
    const queryStr = new URLSearchParams(combinedData).toString();
    window.location.href = `${window.location.pathname}?${queryStr}`;
  });
});

注意事项 #

• 确保两个表单的字段name不重复，避免同名参数被覆盖；若需同名字段，可将name设为数组格式（如name="filter[]"），提交后会以数组形式传递。
• 该方法兼容大部分现代浏览器，无需依赖特定后端框架。

方法二：后端层面保留现有参数 #

如果使用后端框架（如Django、Flask），可以在视图中处理提交请求时，先获取当前URL已有的查询参数，再合并新提交的表单数据，最后重定向到包含所有参数的URL：

以Django为例：

from django.shortcuts import redirect

def my_view(request):
    if request.method == 'GET':
        # 复制现有URL参数，合并新提交的表单数据
        combined_params = request.GET.copy()
        for key, value in request.GET.items():
            combined_params[key] = value
        
        # 重定向到包含全部参数的页面
        return redirect(f'{request.path}?{combined_params.urlencode()}')

这种方法适合后端逻辑可控的场景，无需修改前端表单结构。

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