使用 Django 将变量从视图传递到模板中的 JavaScript 脚本-html教程-PHP中文网

使用 Django 将变量从视图传递到模板中的 JavaScript 脚本

聖光之護

发布： 2025-10-04 18:03:19

原创

148人浏览过

使用 django 将变量从视图传递到模板中的 javascript 脚本

本文将介绍如何在 Django 模板中使用 json_script 标签将变量安全地从 Django 视图传递到 JavaScript 代码。

使用 json_script 标签

Django 提供了一个名为 json_script 的内置模板标签，专门用于安全地将 Python 数据传递到 JavaScript 代码。它会将数据序列化为 JSON 格式，并将其嵌入到 HTML 中，从而避免了手动转义和潜在的安全问题。

步骤 1：在视图中准备数据

首先，在你的 Django 视图中，你需要准备好要传递给 JavaScript 的数据。这可以是一个简单的变量、列表、字典，或者任何可以被 JSON 序列化的 Python 对象。

立即学习“Java免费学习笔记（深入）”；

from django.shortcuts import render

def my_view(request):
    data = {
        'wlws': 10,
        'upperbin': 20,
        'solenoid': 15,
        'brakesw': 25,
    }
    return render(request, 'my_template.html', {'my_data': data})

登录后复制

在这个例子中，我们创建了一个名为 my_data 的字典，它包含我们想要传递给 JavaScript 的数据。

步骤 2：在模板中使用 json_script 标签

模力视频

模力视频 - AIGC视频制作平台 | AI剪辑 | 云剪辑 | 海量模板

查看详情

接下来，在你的 HTML 模板中，使用 json_script 标签将数据嵌入到页面中。

{% load static %}
<!DOCTYPE html>
<html>
<head>
    <title>My Chart</title>
    <script src="https://www.gstatic.com/charts/loader.js"></script>
    <script type="text/javascript">
        google.charts.load('current', {'packages':['corechart']});
        google.charts.setOnLoadCallback(drawChart);

        function drawChart() {
            var data = google.visualization.arrayToDataTable([
                ['Element', 'Density', { role: 'style' }],
                ['WLWS', {{ my_data|safe.wlws }}, '#696969'],
                ['Upperbin', {{ my_data|safe.upperbin }}, '#696969'],
                ['Solenoid', {{ my_data|safe.solenoid }}, '#696969'],
                ['BrakeSW', {{ my_data|safe.brakesw }}, 'color: #696969']
            ]);

            var options = {
                title: 'My Chart',
                legend: { position: 'none' },
            };

            var chart = new google.visualization.ColumnChart(document.getElementById('columnchart_material'));

            chart.draw(data, options);
        }
    </script>
</head>
<body>
    <div id="columnchart_material" style="width: 800px; height: 500px;"></div>
</body>
</html>

登录后复制

步骤 3：在 JavaScript 中访问数据

现在，你可以在 JavaScript 代码中访问 my_data 变量。

{% load static %}
<!DOCTYPE html>
<html>
<head>
    <title>My Chart</title>
    <script src="https://www.gstatic.com/charts/loader.js"></script>
    <script type="text/javascript">
        google.charts.load('current', {'packages':['corechart']});
        google.charts.setOnLoadCallback(drawChart);

        function drawChart() {
            // 从模板获取数据
            var chartData = {{ my_data|safe }};

            var data = google.visualization.arrayToDataTable([
                ['Element', 'Density', { role: 'style' }],
                ['WLWS', chartData.wlws, '#696969'],
                ['Upperbin', chartData.upperbin, '#696969'],
                ['Solenoid', chartData.solenoid, '#696969'],
                ['BrakeSW', chartData.brakesw, 'color: #696969']
            ]);

            var options = {
                title: 'My Chart',
                legend: { position: 'none' },
            };

            var chart = new google.visualization.ColumnChart(document.getElementById('columnchart_material'));

            chart.draw(data, options);
        }
    </script>
</head>
<body>
    <div id="columnchart_material" style="width: 800px; height: 500px;"></div>
</body>
</html>

登录后复制

注意事项：