Django无表单纯JS实现Select onChange跳转：返回200但页面未加载

你的问题出在fetch请求是异步的，默认不会触发页面刷新，而且当前的fetch代码没有处理返回的响应内容。下面提供两种可行的解决思路：

方案一：直接页面跳转（最简单） #

不用fetch，直接让浏览器导航到目标URL，这样视图返回的页面/重定向会自动展示，完全符合你现有视图的逻辑：

修改select.js的函数：

function getSelectedId(selectedValue) {
    // 选中"None"时不做操作
    if (selectedValue === "None") return;
    const endpoint = "/all/select";
    // 直接跳转URL，触发页面刷新
    window.location.href = endpoint + "?select_id=" + selectedValue;
}

这个方法不需要修改视图代码，就能让页面根据视图的返回结果（render或redirect）自动更新。

方案二：异步更新页面内容（无刷新体验） #

如果想要保留无刷新的交互，需要让视图返回HTML片段，再用JS把片段插入到页面指定位置：

步骤1：修改视图，返回HTML片段 #

更新views.py，用render_to_string生成仅包含结果的HTML片段，而不是完整页面：

from django.http import HttpResponse
from django.template.loader import render_to_string

def select(request):
    select_id = request.GET.get("select_id", "None")
    # 用精确判断替代__contains__，避免误匹配
    if select_id == 'None':
        return HttpResponse("")
    elif select_id == 'all': 
        # 如果是"all"，让JS直接跳转到对应页面
        return HttpResponse(reverse('all:probe_list'))
    elif select_id == 'cat1':
        selected = "Category 1"
        config = RequestConfig(request)
        resultTable = AllProbesTable(Probe.objects.filter(category = "cat1"))
        config.configure(resultTable)
        # 加载仅包含表格的模板片段
        html_fragment = render_to_string('all/table_fragment.html', {'table': resultTable, 'selected': selected})
        return HttpResponse(html_fragment)

步骤2：创建HTML片段模板 #

新建all/table_fragment.html，只保留结果内容：

<h3>{{ selected }}</h3>
{{ table }}

步骤3：修改JS处理响应并更新页面 #

更新select.js，处理fetch返回的内容，插入到页面的结果容器中：

function getSelectedId(selectedValue) {
    const value = selectedValue;
    const resultsArea = document.getElementById('results-area');
    
    if (value === "None") {
        // 选中"None"时清空结果区域
        resultsArea.innerHTML = '';
        return;
    }

    const endpoint = "/all/select";
    fetch(endpoint + "?select_id=" + value)
    .then(response => {
        // 如果视图返回重定向，直接跳转
        if (response.redirected) {
            window.location.href = response.url;
            return;
        }
        return response.text();
    })
    .then(html => {
        // 将返回的HTML片段插入到结果容器
        resultsArea.innerHTML = html;
    })
    .catch(error => console.error('请求出错:', error));
}

步骤4：在主页面添加结果容器 #

修改main.html，添加用于展示结果的容器：

{% block content %}
<select class="form-select form-select-lg mb-3 categorySelect select" name="categorySelect" aria-label="Select category" onchange="getSelectedId(value)">
 <option value="None">Select category</option>
 <option value="all">All</option>
 <option value="cat1">Category 1</option>
 <option value="cat2">Category 2</option>
</select>
<!-- 新增结果展示容器 -->
<div id="results-area"></div>
{% endblock %}

额外优化建议 #

视图里的__contains__判断容易出错（比如select_id="cat12"会被误判为cat1），建议全部替换为精确相等判断（==）。

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