当我使用Django模板渲染器渲染一个页面时,我可以传入一个包含各种值的字典变量,使用{{myVar}}在页面中操作它们。
是否有一种方法可以在Javascript中访问相同的变量(可能使用DOM,我不知道Django如何使变量可访问)?我希望能够根据传入的变量中包含的值使用AJAX查找详细信息。
当我使用Django模板渲染器渲染一个页面时,我可以传入一个包含各种值的字典变量,使用{{myVar}}在页面中操作它们。
是否有一种方法可以在Javascript中访问相同的变量(可能使用DOM,我不知道Django如何使变量可访问)?我希望能够根据传入的变量中包含的值使用AJAX查找详细信息。
当前回答
从Django 2.1开始,专门为这个用例引入了一个新的内置模板标记:json_script。
https://docs.djangoproject.com/en/stable/ref/templates/builtins/#json-script
新标记将安全地序列化模板值并防止XSS。
Django文档摘录:
安全地将Python对象输出为JSON,并封装在标签中, 可以与JavaScript一起使用。
其他回答
我也遇到过类似的问题,S.Lott提出的答案对我很有用。
<script type="text/javascript">
var a = "{{someDjangoVariable}}"
</script>
然而,我想在这里指出主要的执行限制。 如果你打算把javascript代码放在不同的文件中,并将该文件包含在你的模板中。这行不通。
只有当你的主模板和javascript代码在同一个文件中,这才会起作用。 也许django团队可以解决这个限制。
注意,如果你想将一个变量传递给外部的.js脚本,那么你需要在你的script标记之前加上另一个声明全局变量的script标记。
<script type="text/javascript">
var myVar = "{{ myVar }}"
</script>
<script type="text/javascript" src="{% static "scripts/my_script.js" %}"></script>
数据像往常一样在视图中的get_context_data中定义
def get_context_data(self, *args, **kwargs):
context['myVar'] = True
return context
我发现我们可以这样传递Django变量到javascript函数:-
<button type="button" onclick="myJavascriptFunction('{{ my_django_variable }}')"></button>
<script>
myJavascriptFunction(djangoVariable){
alert(djangoVariable);
}
</script>
请查看17419号罚单,讨论在Django核心中添加类似的标签,以及在用户生成的数据中使用这个模板标签可能带来的XSS漏洞。amacneil的评论讨论了票中提出的大部分问题。
我认为最灵活和方便的方法是为你想在JS代码中使用的变量定义一个模板过滤器。这允许您确保您的数据被正确转义,并且可以将其用于复杂的数据结构,如dict和list。这就是为什么我写这个答案,尽管有一个公认的答案,有很多赞。
下面是一个模板过滤器的例子:
// myapp/templatetags/js.py
from django.utils.safestring import mark_safe
from django.template import Library
import json
register = Library()
@register.filter(is_safe=True)
def js(obj):
return mark_safe(json.dumps(obj))
这个模板过滤器将变量转换为JSON字符串。你可以这样使用它:
// myapp/templates/example.html
{% load js %}
<script type="text/javascript">
var someVar = {{ some_var | js }};
</script>
对于作为文本存储在Django字段中的JavaScript对象,它需要再次成为动态插入到页面脚本中的JavaScript对象,您需要同时使用escapejs和JSON.parse():
var CropOpts = JSON.parse("{{ profile.last_crop_coords|escapejs }}");
Django的escapejs正确地处理引用,JSON.parse()将字符串转换回JS对象。