掌握Django json_script：实现视图数据与JS的无缝集成-html教程-PHP中文网

掌握Django json_script：实现视图数据与JS的无缝集成

碧海醫心

发布： 2025-10-05 10:04:02

原创

234人浏览过

掌握Django json_script：实现视图数据与JS的无缝集成

本教程将深入探讨如何在Django视图中安全高效地将Python变量传递给前端JavaScript脚本。针对直接在HTML模板中嵌入JavaScript变量的常见挑战，我们将重点介绍Django内置的json_script模板标签，演示其使用方法，并强调其在数据序列化、安全性及代码可读性方面的优势，帮助开发者实现前后端数据的无缝交互。

1. 前后端数据交互的挑战

在构建动态web应用时，我们经常需要将django视图层处理过的python数据传递给前端的javascript脚本，以便进行数据可视化（如图表）、动态内容渲染或复杂的客户端逻辑。一个常见的场景是，后端计算或从数据库获取的数据，需要在前端的javascript图表库（如google charts、chart.js）中使用。

然而，直接在Django模板中通过{{ python_variable }}的方式将Python变量嵌入到JavaScript代码中，存在诸多问题：

类型不匹配： Python的数据类型（如列表、字典）与JavaScript的字符串嵌入方式不兼容，容易导致语法错误。
转义问题： 如果Python变量中包含特殊字符（如引号、换行符），未经适当转义直接嵌入JavaScript字符串中会导致脚本解析失败或安全漏洞（如XSS）。
安全性： 未经安全处理的用户输入数据直接嵌入JavaScript，可能导致跨站脚本攻击。
可读性差： 混合Python模板标签和JavaScript代码会使模板文件变得混乱，难以维护。

为了解决这些问题，Django提供了一个优雅且安全的解决方案：json_script模板标签。

2. json_script：官方推荐的解决方案

json_script是Django 2.1及更高版本引入的一个内置模板标签，它旨在安全地将Python数据结构序列化为JSON格式，并将其嵌入到HTML模板中的<script type="application/json">标签内。这种方式有以下显著优点：

自动JSON序列化： 将Python对象（如列表、字典、数字、字符串等）自动转换为符合JSON标准的字符串。
安全转义： json_script会自动处理HTML和JavaScript的特殊字符转义，防止XSS攻击。
清晰分离： 数据存储在type="application/json"的script标签中，与实际执行的JavaScript代码分离，提高了代码的可读性和维护性。
易于访问： 前端JavaScript可以通过DOM操作轻松获取并解析这些JSON数据。

3. 使用示例

假设我们需要将一个从Django视图传递过来的数值，用于Google Charts图表的多个数据点。

3.1 Django视图 (views.py)

首先，在Django视图中准备好需要传递给前端的数据。这里我们准备一个简单的数值和一个更复杂的列表数据。

来画数字人直播

来画数字人自动化直播，无需请真人主播，即可实现24小时直播，无缝衔接各大直播平台。

查看详情

from django.shortcuts import render
import json

def chart_data_view(request):
    # 这是一个需要传递给前端JavaScript的单一变量
    needed_variable_for_chart = 75

    # 这是一个更复杂的数据结构，例如用于初始化图表数据
    complex_chart_series = [
        {"label": "销售额", "value": 1200, "color": "#4CAF50"},
        {"label": "成本", "value": 800, "color": "#FF9800"},
        {"label": "利润", "value": 400, "color": "#2196F3"},
    ]

    context = {
        'single_chart_value': needed_variable_for_chart,
        'chart_series_data': complex_chart_series,
    }
    return render(request, 'my_chart_template.html', context)

登录后复制

3.2 Django模板 (my_chart_template.html)

在模板中，使用json_script标签将Python变量嵌入到HTML中。json_script接受两个参数：要序列化的Python变量和该script标签的id属性。

{% load static %}
<!DOCTYPE html>
<html>
<head>
    <title>动态图表示例</title>
    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
</head>
<body>
    <h1>我的动态图表</h1>
    <div id="column_chart_div" style="width: 900px; height: 500px;"></div>
    <div id="pie_chart_div" style="width: 900px; height: 500px;"></div>

    {# 使用json_script标签将Python变量安全地传递给JavaScript #}
    {# 'single_chart_value' 将被序列化并存储在id为'neededVariableData'的script标签中 #}
    {{ single_chart_value|json_script:"neededVariableData" }}

    {# 'chart_series_data' 将被序列化并存储在id为'chartSeriesData'的script标签中 #}
    {{ chart_series_data|json_script:"chartSeriesData" }}

    <script type="text/javascript">
        google.charts.load('current', {'packages':['corechart']});
        google.charts.setOnLoadCallback(drawCharts);

        function drawCharts() {
            // 获取并解析单一变量
            const neededVariableElement = document.getElementById('neededVariableData');
            const neededVariable = JSON.parse(neededVariableElement.textContent); // 解析后得到原始数值 (e.g., 75)

            // 获取并解析复杂数据结构
            const chartSeriesElement = document.getElementById('chartSeriesData');
            const chartSeriesData = JSON.parse(chartSeriesElement.textContent); // 解析后得到Python列表对象

            // 绘制柱状图 (使用单一变量)
            drawColumnChart(neededVariable);

            // 绘制饼图 (使用复杂数据结构)
            drawPieChart(chartSeriesData);
        }

        function drawColumnChart(value) {
            var data = google.visualization.arrayToDataTable([
                ["Element", "Density", { role: "style" }],
                ["WLWS", value, "#696969"],
                ["Upperbin", value, "#696969"],
                ["Solenoid", value, "#696969"],
                ["BrakeSW", value, "color: #696969"]
            ]);

            var options = {
                title: '元素密度',
                legend: { position: 'none' },
                vAxis: { minValue: 0, maxValue: 100 }
            };

            var chart = new google.visualization.ColumnChart(document.getElementById('column_chart_div'));
            chart.draw(data, options);
        }

        function drawPieChart(seriesData) {
            const dataTable = [
                ['类别', '数值']
            ];
            seriesData.forEach(item => {
                dataTable.push([item.label, item.value]);
            });

            var data = google.visualization.arrayToDataTable(dataTable);

            var options = {
                title: '各项占比',
                is3D: true,
            };

            var chart = new google.visualization.PieChart(document.getElementById('pie_chart_div'));
            chart.draw(data, options);
        }
    </script>
</body>
</html>

登录后复制

在上面的例子中：

{{ single_chart_value|json_script:"neededVariableData" }} 会在HTML中生成一个类似 <script id="neededVariableData" type="application/json">75</script> 的标签。
{{ chart_series_data|json_script:"chartSeriesData" }} 会生成一个类似 <script id="chartSeriesData" type="application/json">[{"label": "销售额", ...}]</script> 的标签。
在JavaScript中，我们通过document.getElementById('id')获取到这些<script>标签，然后通过JSON.parse(element.textContent)将内部的JSON字符串解析成JavaScript对象或原始值，从而安全地获取到后端数据。

4. 注意事项

可序列化数据类型： json_script只能处理Python中可以被JSON序列化的数据类型，包括字典、列表、字符串、数字、布尔值和None。如果你尝试传递自定义对象，你需要先将其转换为可序列化的基本类型（例如，通过自定义json.JSONEncoder或手动转换）。
id的唯一性： json_script标签的第二个参数是生成<script>元素的id属性。在同一个页面中，这个id必须是唯一的，以便JavaScript能够准确地获取到对应的数据。
数据量： 尽管json_script非常方便，但如果需要传递的数据量非常大（例如，几MB甚至更多），直接嵌入HTML可能会导致页面加载缓慢。在这种情况下，更好的做法是使用AJAX请求（Fetch API或XMLHttpRequest）从后端API获取数据，以实现按需加载和更好的用户体验。
安全性考量： json_script标签本身已经处理了HTML和JavaScript的转义，大大降低了XSS风险。但在JavaScript代码中使用这些数据时，如果这些数据最终会被插入到DOM中（例如，作为HTML内容），仍然需要谨慎处理，特别是当数据来源于用户输入时，应考虑使用textContent而不是innerHTML，或者进行额外的DOM净化。

5. 总结

json_script模板标签是Django提供的一个强大且安全的工具，用于解决Python后端数据与前端JavaScript交互的常见难题。通过将Python变量序列化为JSON并嵌入到特定类型的<script>标签中，它确保了数据传输的安全性、正确性和代码的可读性。掌握json_script的使用，将使您在开发动态Django应用时，能够更高效、更安全地管理前后端数据流。

以上就是掌握Django json_script：实现视图数据与JS的无缝集成的详细内容，更多请关注php中文网其它相关文章！