Django单页双表单提交时如何保留URL参数？

问题核心 #

独立的筛选、排序表单采用GET请求提交时，仅会携带自身表单的参数，导致之前选中的筛选条件或排序规则无法被保留，出现提交一个表单后另一个表单的参数被清空的情况。

解决方案 #

方案1：合并两个表单为一个 #

将筛选和排序控件放在同一个<form>中，提交时同时携带所有参数，无需修改视图逻辑：

修改meals.html：

<form method="get">
  <!-- 筛选标签控件 -->
  {% for field in filter_form %}
      {{ field.as_widget }} {{ field.label_tag }}
  {% endfor %}
  
  <!-- 排序选择控件 -->
  {% for field in sorting_form %}
      {{ field.as_widget }}
  {% endfor %}
  
  <input type="submit" value="应用筛选与排序">
</form>

方案2：保留独立表单，添加隐藏字段传递参数 #

如果需要保留两个独立的提交按钮，在每个表单中添加隐藏字段，携带当前已存在的另一表单参数：

修改筛选表单（保留当前排序参数）：

<form method="get">
  {% for field in filter_form %}
      {{ field.as_widget }} {{ field.label_tag }}
  {% endfor %}
  <!-- 隐藏字段传递当前排序规则 -->
  {% if request.GET.sort %}
    <input type="hidden" name="sort" value="{{ request.GET.sort }}">
  {% endif %}
  <input type="submit" value="筛选">
</form>

修改排序表单（保留当前筛选标签，注意多选标签需要循环生成隐藏字段）：

<form method="get">
  {% for field in sorting_form %}
      {{ field.as_widget }}
  {% endfor %}
  <!-- 循环传递所有选中的筛选标签 -->
  {% for tag in request.GET.tags %}
    <input type="hidden" name="tags" value="{{ tag }}">
  {% endfor %}
  <input type="submit" value="排序">
</form>

可选：优化视图筛选逻辑 #

原视图中逐个标签筛选的方式可以简化为批量筛选，提升效率：

def meals(request):
    meal_list = Meal.objects.all()
    all_tags = Tag.objects.all()  # 重命名避免覆盖筛选后的标签变量
    reviews = Review.objects.all()
    filter_form = FilterForm(request.GET or None)
    sorting_form = SortingForm(request.GET or None)
    active_filters = []

    if filter_form.is_valid():
        selected_tags = filter_form.cleaned_data.get('tags')
        if selected_tags:
            # 用tags__in批量筛选，替代逐个filter
            meal_list = meal_list.filter(tags__in=selected_tags)
            active_filters = [tag.name for tag in selected_tags]

    if sorting_form.is_valid():
        sort = sorting_form.cleaned_data.get('sort')
        meal_list = meal_list.order_by('price' if sort == "price" else '-rating')

    paginator = Paginator(meal_list, 8)
    page_number = request.GET.get('page')
    meals_on_page = paginator.get_page(page_number)

    context = {
        "meal_list": meal_list,
        "distances": distances,
        "tags": all_tags,
        "reviews": reviews,
        "active_filters": active_filters,
        "meals_on_page": meals_on_page,
        "filter_form": filter_form,
        "sorting_form": sorting_form,
    }
    return render(request, 'meals/meals.html', context)

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