如何解决Django视图向JavaScript传递数据为空的问题？

核心问题 #

你的代码存在三个关键问题导致数据传递失败：

1. 上下文变量缺失：仅当selected_model='1'时，视图才会向模板传递actual_data和predicted_data；初始加载或model≠1时，这两个变量不存在，模板渲染后函数参数会变成空值，触发JS语法错误。
2. 数据格式转换不严谨：直接使用|safe传递Python列表，虽然能生成类似JS数组的格式，但遇到空值或复杂数据时容易出错，且不符合Django数据传递的规范。
3. 潜在JS报错中断：代码中引用的modelSelector元素如果不存在，会导致函数提前返回，无法执行后续打印逻辑。

分步修复 #

1. 确保上下文始终包含数据变量 #

修改views.py的else分支，给两个数据变量设置默认空数组，避免模板渲染时变量缺失：

def homepage(request):
    selected_model = request.GET.get('model', '')

    if selected_model == '1':
        # ... 原有数据处理逻辑 ...
        actual_data = [1, 2, 3, 4, 5]
        predicted_data = [6, 7, 8, 9, 10]
        context = {
            'actual_data': actual_data,
            'predicted_data': predicted_data,
        }
    else:
        print("no actual and predicted data")
        # 设置默认空数组，避免模板变量缺失
        context = {
            'actual_data': [],
            'predicted_data': [],
        }

    return render(request, 'base.html', context)

2. 使用Django规范的json_script传递数据（推荐） #

这种方式安全且兼容所有数据结构，是Django官方推荐的前后端数据传递方式：

修改base.html

在页面任意位置（比如</body>前）添加JSON数据标签，同时修改select的事件绑定：

<!-- 渲染JSON格式的数据到页面 -->
{{ actual_data|json_script:"actual-data" }}
{{ predicted_data|json_script:"predicted-data" }}

<select id="visualSelector" name="model" onchange="printSelectedValue()">
    <option value="0">---</option>
    <option value="1">SCATTERPLOT</option>
    <option value="2">LINEPLOT</option>
</select>

修改JavaScript函数

从页面的JSON标签中读取并解析数据：

function printSelectedValue() {
    // 从页面获取并解析JSON数据
    const actualData = JSON.parse(document.getElementById('actual-data').textContent);
    const predictedData = JSON.parse(document.getElementById('predicted-data').textContent);
    
    var selectedValue = document.getElementById('visualSelector').value;
    // 先检查modelSelector元素是否存在，避免报错
    const modelSelector = document.getElementById('modelSelector');
    if (!modelSelector) {
        console.log("未找到modelSelector元素");
        return;
    }
    var selectedModelValue = modelSelector.value;

    if (selectedModelValue === '0') {
        console.log("No model selected");
        return; 
    }

    var canvas = document.getElementById('plotCanvas');
    if (!canvas) {
        console.log("未找到plotCanvas元素");
        return;
    }

    if (selectedValue === '0') {
        canvas.style.backgroundColor = 'red';
        console.log("value 0:", actualData);
    } else if (selectedValue === '1') {
        canvas.style.backgroundColor = 'blue';
        console.log("value 1:", predictedData);
    } else if (selectedValue === '2') {
        canvas.style.backgroundColor = 'green';
        console.log("value 2:");
    }
}

3. 备选方案：直接传递JSON字符串 #

如果不想使用json_script，可以在视图中先将数据转为JSON字符串，再传递给模板：

修改views.py

import json

def homepage(request):
    # ... 原有逻辑 ...
    context = {
        'actual_data': json.dumps(actual_data),
        'predicted_data': json.dumps(predicted_data),
    }
    # ... else分支同样设置默认值 ...

修改base.html

<select id="visualSelector" name="model" onchange="printSelectedValue(JSON.parse('{{ actual_data|safe }}'), JSON.parse('{{ predicted_data|safe }}'))">
    <!-- 选项不变 -->
</select>

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