无法在 Django 模板 html 脚本中使用 python 字典作为 JSON

Question

我将 python 字典传递给 Django 模板 html 脚本：-

def create_dict(request):
   #creating the dictionary and storing it in py_dict
   py_dict = json.dumps(py_dict)
   context = {
   "py_dict": py_dict
   }
   render(request, 'index.html', context)

在 Django 模板 (index.html) 中，我检索字典如下：-

 <script language='javascript'>
        $(document).ready(function(){
        var dict = "{{py_dict}}";
        console.log(dict);
        });
</script>

如果我尝试将变量 dict 直接分配给 Django 变量（py_dict）而不使用双引号（var dict = {{py_dict}};），那么它会显示 Not found & error

实际的python字典是这样的：-

{"19.2.000/": {"19.2.000/dataconversion/": {}, "19.2.000/reim/": {}, "19.2.000/resa/": {}, "19.2.000/rms/": {}}, "19.2.001/": {"19.2.001/dataconversion/": {}}, "19.2/": {"19.2/alloc/": {}, "19.2/rpm/": {}}, "RESA/": {"RESA/folder1/": {}}, "RMS/": {}, "RPM/": {}, "/": {}, "apc/": {"apc/apc_inner/": {}}, "dataconversion/": {}, "folder2/": {}, "merch/": {"merch/19.0.x/": {"merch/19.0.x/19.0.000.1/": {"merch/19.0.x/19.0.000.1/dataconversion/": {}}, "merch/19.0.x/19.0.001/": {"merch/19.0.x/19.0.001/alloc/": {}, "merch/19.0.x/19.0.001/reim/": {}, "merch/19.0.x/19.0.001/resa/": {}, "merch/19.0.x/19.0.001/rms/": {"merch/19.0.x/19.0.001/rms/reports/": {}}, "merch/19.0.x/19.0.001/rpm/": {}}, "merch/19.0.x/19.0.002.1/": {"merch/19.0.x/19.0.002.1/Merged_RC/": {"merch/19.0.x/19.0.002.1/Merged_RC/rms/": {}}, "merch/19.0.x/19.0.002.1/hotfix/": {"merch/19.0.x/19.0.002.1/hotfix/rms/": {}}}, "merch/19.0.x/19.0.002/": {"merch/19.0.x/19.0.002/alloc/": {}, "merch/19.0.x/19.0.002/dataconversion/": {}, "merch/19.0.x/19.0.002/jos_merch/": {}, "merch/19.0.x/19.0.002/reim/": {}, "merch/19.0.x/19.0.002/resa/": {}, "merch/19.0.x/19.0.002/rms/": {"merch/19.0.x/19.0.002/rms/rms19installer.zip": {}}}}}}

但是当我在脚本标签中console.log它时，输出是这样的：-

{"19.2.000/": {"19.2.000/dataconversion/": {}, "19.2.000/reim/": {}, "19.2.000/resa/": {}, "19.2.000/rms/": {}}, "19.2.001/": {"19.2.001/dataconversion/": {}}, "19.2/": {"19.2/alloc/": {}, "19.2/rpm/": {}}, "RESA/": {"RESA/folder1/": {}}, "RMS/": {}, "RPM/": {}, "/": {}, "apc/": {"apc/apc_inner/": {}}, "dataconversion/": {}, "folder2/": {}, "merch/": {"merch/19.0.x/": {"merch/19.0.x/19.0.000.1/": {"merch/19.0.x/19.0.000.1/dataconversion/": {}}, "merch/19.0.x/19.0.001/": {"merch/19.0.x/19.0.001/alloc/": {}, "merch/19.0.x/19.0.001/reim/": {}, "merch/19.0.x/19.0.001/resa/": {}, "merch/19.0.x/19.0.001/rms/": {"merch/19.0.x/19.0.001/rms/reports/": {}}, "merch/19.0.x/19.0.001/rpm/": {}}, "merch/19.0.x/19.0.002.1/": {"merch/19.0.x/19.0.002.1/Merged_RC/": {"merch/19.0.x/19.0.002.1/Merged_RC/rms/": {}}, "merch/19.0.x/19.0.002.1/hotfix/": {"merch/19.0.x/19.0.002.1/hotfix/rms/": {}}}, "merch/19.0.x/19.0.002/": {"merch/19.0.x/19.0.002/alloc/": {}, "merch/19.0.x/19.0.002/dataconversion/": {}, "merch/19.0.x/19.0.002/jos_merch/": {}, "merch/19.0.x/19.0.002/reim/": {}, "merch/19.0.x/19.0.002/resa/": {}, "merch/19.0.x/19.0.002/rms/": {"merch/19.0.x/19.0.002/rms/rms19installer.zip": {}}}}}}

其中" 为每个" 添加，显然它不是javascript 可以处理的实际JSON 格式。而且由于我将双引号内的 Django 变量 (py_dict) 传递给变量 dict，这本身也是一个问题，因为它变成了一个字符串变量，因此我无法对 Django 变量的元素执行任何操作字典py_dict

如何将其转换为正确的 javascript JSON 格式？

Answer 1

根据经验，永远不要直接在 javascript 中渲染来自 Django 的任何内容。这可能导致潜在的 XSS 攻击。如果您想要来自服务器的数据，可以在动态需要时使用 AJAX，或者如果在页面加载时只需要一次，则可以使用 json_script template filter [Django docs]：

HTML 中的某处：

{{ py_dict|json_script:"py_dict" }}

这将呈现如下：

<script id="py_dict" type="application/json">JSON HERE</script>

接下来在 javascript 中你可以简单地使用：

var dict = JSON.parse(document.getElementById('py_dict').textContent);

Answer 2

代替

var dict = "{{py_dict}}";

你可以简单地使用：

var dict = {{ py_dict | safe }};

你可以在这里查看safe模板标签https://docs.djangoproject.com/en/3.2/ref/templates/builtins/#safe