如何在javascript中使用从Django传递的上下文变量？答案

【问题标题】：How to use the context variables passed from Django in javascript?如何在javascript中使用从Django传递的上下文变量？
【发布时间】：2017-09-04 10:13:30
【问题描述】：

我在views.py中有一个方法如下：

def index(self, request):
    initial = get_initial()
    context = {"context" : initial_topics}
    template = loader.get_template('index.html')
    return HttpResponse(template.render(context, request))

如何在 javascript 中访问“上下文”字典？就像我的 $(function(){});

【问题讨论】：

标签： javascript python django

【解决方案1】：

您可以访问 HTML script 标记内的上下文变量。

仍然有一些规则适用：

如果上下文变量是字符串，则用引号将上下文变量括起来。
如果上下文变量是 dict 或列表，则在您的视图中将它们转换为 json 并使用 safe 过滤器：

警告：切勿对不受信任的数据（例如用户提交的数据）使用safe 过滤器。在使用 safe 过滤器之前，请始终清理数据（转义不安全字符）。 Read about XSS attacks 了解更多。

例子：

<script>
$(function(){
    var my_str = "{{ my_str }}";
    var my_dict = {{ my_dict|safe }}; // no quotes here
    var my_list = {{ my_list|safe }}; // no quotes here
});
</script>

您应该在视图中将 dict 和 list 变量转换为 json，因为如果在 dict 中有任何 Python 特定的关键字，例如 True 或 False 或 None，JS 不会理解它们并且会引发错误。

在 JS 中，等效的关键字是true、false 和null。所以，将dicts和lists转成json，会将数据转成JS兼容的格式。

例子：

import json 

def my_view(...):
    my_list = [...]
    my_dict = {...}
    
    context = {'my_list': json.dumps(my_list), 'my_dict': json.dumps(my_dict)}
    return ...

var my_list = {{ my_list|safe }};
var my_dict = {{ my_dict|safe }};

【讨论】：

谢谢。例如，我正在传递一个 dict {"one" : 1, "two":2} 。在做 json.dumps 之后。在我的 javascript 端，当我刚刚执行 alert("{{context}}" 时，它给出了 "{"one": 1, "two": 2}"。请凝胶p
@Trickycoder 你好。对不起，我的回答有一些错误。我已经修复了它们并编辑了整个答案并添加了更多解释。希望这次能帮到你。
有这方面的文档吗？

【解决方案2】：

如果 javascript 代码位于正在呈现的 html 模板中，您可以按正常方式使用它{{ context }}。否则，在 html 模板中声明一个全局变量，然后从单独的 js 文件中访问该全局变量。

【讨论】：

【解决方案3】：

如果你想插入到 Javascript 中，请确保使用 escapejs，在更高级的情况下你可能需要使用 JSON.parse；

var context = "{{ context }}"

如果还有问题，请尝试；

var context = JSON.parse("{{ context|escapejs }}");

JSON.parse() 方法解析 JSON 字符串，构造字符串描述的 JavaScript 值或对象。一个可选的可以提供 reviver 函数来对返回之前的结果对象。 doc

【讨论】：

我们可以使用 var my_dict = JSON.parse("{{ my_dict|safe }}"); ?