当我使用Django模板渲染器渲染一个页面时,我可以传入一个包含各种值的字典变量,使用{{myVar}}在页面中操作它们。
是否有一种方法可以在Javascript中访问相同的变量(可能使用DOM,我不知道Django如何使变量可访问)?我希望能够根据传入的变量中包含的值使用AJAX查找详细信息。
当我使用Django模板渲染器渲染一个页面时,我可以传入一个包含各种值的字典变量,使用{{myVar}}在页面中操作它们。
是否有一种方法可以在Javascript中访问相同的变量(可能使用DOM,我不知道Django如何使变量可访问)?我希望能够根据传入的变量中包含的值使用AJAX查找详细信息。
当前回答
对于作为文本存储在Django字段中的JavaScript对象,它需要再次成为动态插入到页面脚本中的JavaScript对象,您需要同时使用escapejs和JSON.parse():
var CropOpts = JSON.parse("{{ profile.last_crop_coords|escapejs }}");
Django的escapejs正确地处理引用,JSON.parse()将字符串转换回JS对象。
其他回答
Django 2.1+有一个很好的简单方法,使用内置的模板标签json_script实现。一个简单的例子是:
在模板中声明你的变量:
{{变量|json_script:'name'}}
然后调用你的<script> Javascript中的变量:
var js_variable = JSON.parse(document.getElementById('name').textContent);
对于像“User”这样更复杂的变量,使用Django内置的序列化器,你可能会得到类似“User类型的对象不是JSON可序列化的”这样的错误。在这种情况下,您可以使用Django Rest框架来支持更复杂的变量。
一个对我有用的解决方案是在模板中使用隐藏的输入字段
<input type="hidden" id="myVar" name="variable" value="{{ variable }}">
然后以这种方式获取javascript的值,
var myVar = document.getElementById("myVar").value;
请查看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>
有许多答案指向json_script。与人们可能认为的相反,这并不是一个万能的解决方案。
例如,当我们想要将在For循环中生成的动态变量传递给JavaScript时,最好使用data-attributes之类的东西。
点击这里查看更多细节。
以下是我很容易就能做到的: 我修改了模板的base.html文件,并把它放在底部:
{% if DJdata %}
<script type="text/javascript">
(function () {window.DJdata = {{DJdata|safe}};})();
</script>
{% endif %}
然后当我想在javascript文件中使用一个变量时,我创建了一个DJdata字典,并通过json将它添加到上下文:context['DJdata'] = json.dumps(DJdata)
希望能有所帮助!