如何将Django字典类型变量传递至JavaScript？

嘿，别担心，刚接触Django遇到这种问题太正常啦！我来给你讲几种简单靠谱的实现方式，都是日常开发里常用的：

方法一：官方推荐的json_script模板标签（最安全） #

这是Django官方主推的方式，能自动处理转义，避免XSS安全问题，特别适合新手用：

1. 首先在你的视图里把字典传到模板：

# views.py
from django.shortcuts import render

def my_view(request):
    my_dict = {'testvar1': '1', 'testvar2': '38', 'testvar3': '160'}
    return render(request, 'your_template.html', {'my_dict': my_dict})

2. 在HTML模板里，用json_script标签把字典转成安全的JSON格式：

<!-- your_template.html -->
{{ my_dict|json_script:"my-django-data" }}

这个标签会生成一个隐藏的<script>标签，id是你指定的my-django-data，里面存的是转义后的JSON字符串。
3. 最后在你的JavaScript代码里获取并解析：

const djangoData = JSON.parse(document.getElementById('my-django-data').textContent);
// 现在就能用啦！比如打印testvar2的值
console.log(djangoData.testvar2); // 输出38

方法二：直接用json过滤器嵌入（简单但要注意安全） #

如果你的字典里没有用户输入的内容（完全是后端生成的安全数据），可以直接把JSON嵌入到JS里：

<!-- your_template.html -->
<script>
const djangoData = {{ my_dict|json|safe }};
// 直接使用
console.log(djangoData.testvar3); // 输出160
</script>

⚠️ 敲黑板：如果字典里包含用户提交的内容，一定要用方法一，不然可能有XSS攻击风险！

方法三：通过AJAX动态获取（适合异步场景） #

如果你的数据不需要在页面加载时就拿到，而是要动态获取，可以用AJAX请求后端接口：

1. 先写一个返回JSON的视图：

# views.py
from django.http import JsonResponse

def get_dict_data(request):
    my_dict = {'testvar1': '1', 'testvar2': '38', 'testvar3': '160'}
    return JsonResponse(my_dict)

2. 在urls.py里配置路由：

# urls.py
from django.urls import path
from . import views

urlpatterns = [
    # 其他路由...
    path('get-dict-data/', views.get_dict_data, name='get_dict_data'),
]

3. 前端用JavaScript的fetch请求数据：

fetch('/get-dict-data/')
    .then(response => response.json())
    .then(data => {
        console.log(data.testvar1); // 输出1
        // 这里处理拿到的数据
    })
    .catch(error => console.error('请求出错:', error));

选哪种方法取决于你的场景：页面加载时就需要数据用方法一或二，异步获取用方法三。

内容的提问来源于stack exchange，提问作者Miller