在 Django Web 开发中，经常需要在前端 JavaScript 代码中使用后端 Python 代码中的数据。例如，你可能需要根据数据库中的数据动态生成图表，或者根据用户的角色显示不同的界面元素。直接在 JavaScript 中使用 Django 模板变量可能会导致安全问题，并且不够优雅。Django 提供了 json_script 模板标签，可以安全地将 Python 对象序列化为 JSON 格式，并在 JavaScript 中使用。
使用 json_script 传递变量
json_script 模板标签位于 django.utils.html 模块中，它接受一个 Python 对象作为参数，并将其序列化为 JSON 字符串，然后将其嵌入到 HTML 页面中，并使用指定的 ID 封装在 标签中。
1. 在 Django 视图中准备数据：
首先，在你的 Django 视图函数中，准备好要传递给 JavaScript 的数据。这可以是任何 Python 对象，例如字典、列表、字符串或数字。
立即学习“Java免费学习笔记（深入）”；
from django.shortcuts import renderdef 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 %} My Chart 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); } // 确保 data 变量已定义 var data = {{ data|json_script:"data-from-django" }};
3. 在 JavaScript 中访问数据：
在 JavaScript 代码中，使用 document.getElementById() 方法获取包含 JSON 数据的 标签，然后使用 JSON.parse() 方法将 JSON 字符串解析为 JavaScript 对象。
const dataFromDjango = JSON.parse(document.getElementById('data-from-django').textContent);console.log(dataFromDjango.wlws); // 输出: 10console.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 脚本的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1581096.html
微信扫一扫 
支付宝扫一扫 
