Django ListView获取前端select值返回None，求解决方法

问题原因 #

你获取到None是因为Select控件没有触发表单提交，导致request.GET中没有携带selection参数。默认情况下，单纯的Select不会自动向服务器发送请求，必须通过表单提交或AJAX传递参数。

解决方案一：表单同步提交（简单直接） #

1. 修改模板，用表单包裹Select #

将Select放在form标签内，设置表单提交方式为GET，并添加自动提交逻辑：

<form method="GET" action="">
    <div class="select">
        <select id="g1" name="selection" onchange="this.form.submit()">
            {% for obj in OBJECTS %}
                <!-- 保持选中状态，提升用户体验 -->
                <option value="{{ obj }}" {% if request.GET.selection == obj|stringformat:"s" %}selected{% endif %}>
                    {{ obj }}
                </option>
            {% endfor %}
            <option value="1" {% if request.GET.selection == "1" %}selected{% endif %}>1</option>
        </select>
    </div>
    <!-- 可选：添加手动提交按钮 -->
    <button type="submit" style="margin-top:8px;">应用筛选</button>
</form>

• onchange="this.form.submit()"：用户切换选项时自动提交表单
• {% if ... selected %}：页面刷新后保持用户之前选择的选项

2. 视图代码优化（保留原有逻辑，增加空值处理） #

你的get_queryset逻辑本身没问题，只需补充空值判断避免无效请求：

def get_queryset(self):
    url = config('REPORT_PROJECT_BUDGET')
    select_front = self.request.GET.get('selection')
    payload = {'ObjectGUID': select_front, }
    print(payload)  # 现在能正常获取到Select的值了
    
    queryset = []
    # 只有当select_front存在时才调用接口
    if select_front:
        response = requests.get(url, auth=UNICA_AUTH, params=payload).json()
        # 根据接口返回的数据结构，将response转换为queryset需要的格式
        # 示例：queryset = response.get('items', [])
    return queryset

def get_context_data(self, *, object_list=None, **kwargs):
    context = super().get_context_data(**kwargs)
    context['OBJECTS'] = ObjectList.objects.all()
    return context

解决方案二：AJAX异步加载（无刷新更新内容） #

如果需要页面不刷新就更新内容，可使用AJAX实现：

1. 模板添加AJAX脚本 #

<div class="select">
    <select id="g1" name="selection">
        {% for obj in OBJECTS %}
            <option value="{{ obj }}" {% if request.GET.selection == obj|stringformat:"s" %}selected{% endif %}>{{ obj }}</option>
        {% endfor %}
        <option value="1" {% if request.GET.selection == "1" %}selected{% endif %}>1</option>
    </select>
</div>
<!-- 用于展示结果的容器 -->
<div id="result-container"></div>

<script src="https://code.jquery.com/jquery-3.6.4.min.js"></script>
<script>
$(function() {
    $('#g1').change(function() {
        const selection = $(this).val();
        $.get(window.location.pathname, {selection: selection}, function(data) {
            // 这里可以处理返回的HTML或JSON，更新页面内容
            $('#result-container').html(data);
        });
    });
});
</script>

2. 视图调整支持AJAX #

如果需要返回部分HTML，可在视图中判断请求类型：

def get(self, request, *args, **kwargs):
    self.object_list = self.get_queryset()
    context = self.get_context_data()
    
    if request.is_ajax():
        # 返回部分模板内容
        return render(request, 'partial_result.html', context)
    return render(request, self.template_name, context)

创建partial_result.html模板，只渲染需要更新的内容部分。

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