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

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

碧海醫心

发布： 2025-10-04 18:09:01

原创

575人浏览过

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

在 Django Web 开发中，经常需要在前端 JavaScript 代码中使用后端 Python 代码中的数据。例如，你可能需要根据数据库中的数据动态生成图表，或者根据用户的角色显示不同的界面元素。直接在 JavaScript 中使用 Django 模板变量可能会导致安全问题，并且不够优雅。Django 提供了 json_script 模板标签，可以安全地将 Python 对象序列化为 JSON 格式，并在 JavaScript 中使用。

使用 json_script 传递变量

json_script 模板标签位于 django.utils.html 模块中，它接受一个 Python 对象作为参数，并将其序列化为 JSON 字符串，然后将其嵌入到 HTML 页面中，并使用指定的 ID 封装在 <script> 标签中。

1. 在 Django 视图中准备数据：

首先，在你的 Django 视图函数中，准备好要传递给 JavaScript 的数据。这可以是任何 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', {'data': data})

登录后复制

2. 在 HTML 模板中使用 json_script：

模力视频

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

查看详情

在你的 HTML 模板中，使用 json_script 标签将数据嵌入到页面中。你需要指定一个唯一的 ID，以便在 JavaScript 中找到数据。

{% load static %}
{% load django_bootstrap5 %}
{% load humanize %}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>My Chart</title>
    <script type="text/javascript" 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() {
            // 从 JSON 获取数据
            const dataFromDjango = JSON.parse(document.getElementById('data-from-django').textContent);

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

            var options = {
                title: 'Element Densities',
                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>
    <script>
        // 确保 data 变量已定义
        var data = {{ data|json_script:"data-from-django" }};
    </script>

</body>
</html>

登录后复制

3. 在 JavaScript 中访问数据：

在 JavaScript 代码中，使用 document.getElementById() 方法获取包含 JSON 数据的 <script> 标签，然后使用 JSON.parse() 方法将 JSON 字符串解析为 JavaScript 对象。

const dataFromDjango = JSON.parse(document.getElementById('data-from-django').textContent);

console.log(dataFromDjango.wlws); // 输出: 10
console.log(dataFromDjango.upperbin); // 输出: 20

登录后复制

在这个例子中，data-from-django 是我们在 json_script 标签中指定的 ID。textContent 属性包含 JSON 字符串。JSON.parse() 方法将 JSON 字符串转换为 JavaScript 对象，我们可以像访问普通 JavaScript 对象一样访问其中的属性。

注意事项

安全性： json_script 会自动转义 HTML 特殊字符，防止 XSS 攻击。
数据类型： json_script 可以处理 Python 的基本数据类型，例如字符串、数字、布尔值、列表和字典。如果你的数据包含自定义对象，你需要先将其转换为可以序列化为 JSON 的格式。
ID 的唯一性： 确保在同一个 HTML 页面中，每个 json_script 标签都使用不同的 ID，以避免冲突。
错误处理： 在 JavaScript 中解析 JSON 数据时，应该使用 try...catch 块来处理可能发生的错误。

总结

使用 Django 的 json_script 模板标签，可以安全方便地将 Python 变量传递到 HTML 模板中的 JavaScript 脚本。这种方法避免了直接在 JavaScript 中使用 Django 模板变量可能导致的安全问题，并且使代码更加清晰易懂。通过本文的介绍，你应该能够掌握如何使用 json_script 来传递数据，并在 JavaScript 中使用这些数据来构建动态 Web 应用程序。

以上就是从 Django 视图传递变量到模板中的 JavaScript 脚本的详细内容，更多请关注php中文网其它相关文章！