当我使用Django模板渲染器渲染一个页面时,我可以传入一个包含各种值的字典变量,使用{{myVar}}在页面中操作它们。

是否有一种方法可以在Javascript中访问相同的变量(可能使用DOM,我不知道Django如何使变量可访问)?我希望能够根据传入的变量中包含的值使用AJAX查找详细信息。


当前回答

我在Django 2.1中使用这种方法,对我来说,这种方法是安全的(参考):

Django身边:

def age(request):
    mydata = {'age':12}
    return render(request, 'test.html', context={"mydata_json": json.dumps(mydata)})

Html:

<script type='text/javascript'>
     const  mydata = {{ mydata_json|safe }};
console.log(mydata)
 </script>

其他回答

对于字典,最好先编码成JSON。你可以使用simplejson.dumps(),或者如果你想从App Engine中的数据模型转换,你可以使用GQLEncoder库中的encode()。

请查看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>

如果你想通过将变量作为参数直接发送给函数,那么试试这个

<input type="text" onkeyup="somefunction('{{ YOUR_VARIABLE }}')">

从前面的回答来看,安全性可以得到改进

Javascript中有两件事对我有用:

'{{context_variable|escapejs }}'

及其他: 在views.py

from json import dumps as jdumps

def func(request):
    context={'message': jdumps('hello there')}
    return render(request,'index.html',context)

在html中:

{{ message|safe }}

我也一直在挣扎。表面上看,上述解决方案似乎是可行的。然而,django架构要求每个html文件都有自己的呈现变量(也就是说,{{contact}}呈现给contact.html,而{{posts}}呈现给e.g. index.html等等)。另一方面,<script>标记出现在base.html中的{%endblock%}之后,contact.html和index.html继承自base.html。这基本上意味着任何解包括

<script type="text/javascript">
    var myVar = "{{ myVar }}"
</script>

必然会失败,因为变量和脚本不能共存于同一个文件中。

我最终想出了一个简单的解决方案,对我来说,就是简单地用一个带有id的标签包装变量,然后在js文件中引用它,就像这样:

// index.html
<div id="myvar">{{ myVar }}</div>

然后:

// somecode.js
var someVar = document.getElementById("myvar").innerHTML;

和往常一样,在base.html中包含<script src="static/js/somecode.js"></script>。 当然,这只是关于获取内容。关于安全问题,请参考其他答案。