本文将介绍如何在 Django 模板中使用 json_script 标签将变量安全地从 Django 视图传递到 JavaScript 代码。
使用 json_script 标签
Django 提供了一个名为 json_script 的内置模板标签，专门用于安全地将 Python 数据传递到 JavaScript 代码。它会将数据序列化为 JSON 格式，并将其嵌入到 HTML 中，从而避免了手动转义和潜在的安全问题。
步骤 1：在视图中准备数据
首先，在你的 Django 视图中，你需要准备好要传递给 JavaScript 的数据。这可以是一个简单的变量、列表、字典，或者任何可以被 JSON 序列化的 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', {'my_data': data})
在这个例子中，我们创建了一个名为 my_data 的字典，它包含我们想要传递给 JavaScript 的数据。
步骤 2：在模板中使用 json_script 标签
接下来，在你的 HTML 模板中，使用 json_script 标签将数据嵌入到页面中。
{% load static %} My Chart 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); }
步骤 3：在 JavaScript 中访问数据
现在，你可以在 JavaScript 代码中访问 my_data 变量。
{% load static %} My Chart 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); }
注意事项：
确保在模板中加载 static 标签：{% load static %}。使用 |safe 过滤器以防止 HTML 转义。
总结
json_script 标签提供了一种安全且方便的方式，可以将 Django 视图中的数据传递到 HTML 模板中的 JavaScript 代码。 通过使用这种方法，你可以轻松地在前端动态生成内容，而无需担心安全问题。
以上就是使用 Django 将变量从视图传递到模板中的 JavaScript 脚本的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1581098.html
微信扫一扫 
支付宝扫一扫 
