如何在Django中通过前端按钮传参刷新视图实现数据筛选？

你的思路完全正确：通过点击按钮向视图函数传递筛选参数，视图根据参数过滤数据后重新渲染页面，这是Django实现这类数据筛选需求的常规且合理的思路。

以下是实现该需求的最优方案，分后端视图修改和前端模板调整两部分：

一、修改后端视图函数 #

在原index视图中，获取前端传递的筛选参数，根据参数值过滤要返回的campuses数据：

def index(request):
    # 从GET请求中获取筛选参数，默认值为'all'（显示全部）
    filter_type = request.GET.get('filter', 'all')

    # 假设你已经有了获取全部校区数据的逻辑，比如 sorted_sites = ...
    # 根据筛选参数过滤数据
    if filter_type == 'group_a':
        # 替换为你的第一组筛选逻辑，比如筛选状态为'online'的校区
        filtered_campuses = [item for item in sorted_sites if item[1] == 'online']
    elif filter_type == 'group_b':
        # 替换为你的第二组筛选逻辑，比如筛选状态为'maintenance'的校区
        filtered_campuses = [item for item in sorted_sites if item[1] == 'maintenance']
    else:
        # 默认返回全部数据
        filtered_campuses = sorted_sites

    # 其他变量保持原有逻辑，同时传递当前筛选状态给模板，用于保持单选按钮选中状态
    return render(request, 'home.html', {
        'campuses': filtered_campuses,
        'cc_campuses': cc_sorted_sites,
        'update': update,
        'current_filter': filter_type
    })

二、调整前端模板 #

添加单选按钮表单，通过GET请求传递筛选参数，并保持当前选中状态：

<!-- 筛选单选按钮表单 -->
<form method="GET" action="{% url 'index' %}">
    <label>
        <input type="radio" name="filter" value="all" {% if current_filter == 'all' %}checked{% endif %}>
        全部数据
    </label>
    <label>
        <input type="radio" name="filter" value="group_a" {% if current_filter == 'group_a' %}checked{% endif %}>
        在线校区
    </label>
    <label>
        <input type="radio" name="filter" value="group_b" {% if current_filter == 'group_b' %}checked{% endif %}>
        维护中校区
    </label>
</form>

<!-- 原有数据展示代码 -->
{% for campus, status in campuses %}
    <a class="campusbutton"><div class="item" id="{{ status }}"> {{ campus }}</div></a>
{% endfor %}

<!-- 可选：添加JS实现点击单选按钮自动提交表单，无需手动点击提交按钮 -->
<script>
document.querySelectorAll('input[name="filter"]').forEach(radio => {
    radio.addEventListener('change', function() {
        this.form.submit();
    });
});
</script>

方案优势 #

1. 符合RESTful设计：使用GET请求传递筛选参数，筛选状态会保留在URL中，用户可收藏或分享筛选后的页面
2. 逻辑清晰易扩展：后续新增筛选条件时，只需添加新的单选按钮和对应的后端分支逻辑即可
3. 用户体验友好：通过current_filter变量保持单选按钮的选中状态，避免页面刷新后选中状态丢失

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