在 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：
在你的 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 应用程序。
