Django中字典无法从教授页传递至学生页的问题排查

问题场景 #

在professor_page.html页面中存在存储采集数据的字典professorData，需要跳转到student_page.html时传递该字典。当前实现的前端JS与后端视图代码运行后，数据未成功传递——排查发现跳转后触发的是GET请求，但GET分支无法获取到目标字典。

当前代码 #

前端（professor_page.html）

function navigateToStudentPage() {
            var csrfToken = $('input[name="csrfmiddlewaretoken"]').val();
            var data = {
                'csrfmiddlewaretoken': csrfToken,
                'professorData': JSON.stringify(professorData), // Convert the dictionary to a JSON string
                'formData': $('#professor-form').serialize() // Include any other form data if needed
              };

            var studentPageUrl = '{% url 'student_page' %}' + '?' + data;
            $.ajax({
                url: '{% url 'student_page' %}',
                type: 'POST',
                data: data,
                success: function(response) {
                    window.location.href = studentPageUrl; // Redirect to the student page URL
                }
            });
        }

后端（views.py）

def student_page(request):
    if request.method == 'POST':
        professor_data = request.POST.get('professorData')
        professors = json.loads(professor_data)
        # Access the professor data as a dictionary
        for professor, time_slots in professors.items():
            print("POST")
            print(professor)
            print(time_slots)
    else:
        professor_data = request.GET.get('professorData')
        professors = json.loads(professor_data)
        # Access the professor data as a dictionary
        for professor, time_slots in professors.items():
            print("GET")
            print(professor)
            print(time_slots)


    context = {'professors': professors}
    return render(request, 'myapp/student_page.html', context)

错误原因 #

1. 前端拼接studentPageUrl时，直接将data对象拼接到URL后，会生成[object Object]这种无效的查询参数，导致GET请求无法解析到professorData。
2. 此处完全没必要用AJAX POST请求后再跳转GET——AJAX用于异步获取数据，跳转页面的场景下直接构造有效参数或用表单提交更合理。

修正方案 #

方案一：直接构造GET请求跳转（简单直接） #

适合数据量较小、无敏感信息的场景，直接将JSON字符串编码后拼入URL：

前端修改

function navigateToStudentPage() {
    // 把字典转成JSON字符串并编码，避免特殊字符破坏URL结构
    var professorDataStr = encodeURIComponent(JSON.stringify(professorData));
    // 构造带有效参数的跳转URL
    var studentPageUrl = "{% url 'student_page' %}?professorData=" + professorDataStr;
    // 直接跳转页面
    window.location.href = studentPageUrl;
}

后端修改（增加异常处理，避免空值或解析失败报错）

import json
from django.shortcuts import render

def student_page(request):
    professors = {}
    professor_data = request.GET.get('professorData')
    if professor_data:
        try:
            professors = json.loads(professor_data)
            for professor, time_slots in professors.items():
                print("GET")
                print(professor)
                print(time_slots)
        except json.JSONDecodeError:
            # 处理JSON解析失败的情况，比如参数被篡改
            pass

    context = {'professors': professors}
    return render(request, 'myapp/student_page.html', context)

方案二：用POST表单提交（适合大数据量/敏感数据） #

如果professorData数据量较大，或不想将数据暴露在URL中，可使用隐藏表单提交：

前端修改

<!-- 在页面添加隐藏表单 -->
<form id="professor-form" method="POST" action="{% url 'student_page' %}">
    {% csrf_token %}
    <!-- 用于存储JSON字符串的隐藏输入框 -->
    <input type="hidden" id="professor-data-input" name="professorData">
    <!-- 原有表单字段可保留在此 -->
</form>

<script>
function navigateToStudentPage() {
    // 将字典转成JSON字符串，赋值给隐藏输入框
    document.getElementById('professor-data-input').value = JSON.stringify(professorData);
    // 提交表单完成跳转
    document.getElementById('professor-form').submit();
}
</script>

后端修改（完善异常处理）

import json
from django.shortcuts import render

def student_page(request):
    professors = {}
    if request.method == 'POST':
        professor_data = request.POST.get('professorData')
        if professor_data:
            try:
                professors = json.loads(professor_data)
                for professor, time_slots in professors.items():
                    print("POST")
                    print(professor)
                    print(time_slots)
            except json.JSONDecodeError:
                pass
    # GET请求可留空或处理默认逻辑
    context = {'professors': professors}
    return render(request, 'myapp/student_page.html', context)

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