当我使用Django模板渲染器渲染一个页面时,我可以传入一个包含各种值的字典变量,使用{{myVar}}在页面中操作它们。
是否有一种方法可以在Javascript中访问相同的变量(可能使用DOM,我不知道Django如何使变量可访问)?我希望能够根据传入的变量中包含的值使用AJAX查找详细信息。
当我使用Django模板渲染器渲染一个页面时,我可以传入一个包含各种值的字典变量,使用{{myVar}}在页面中操作它们。
是否有一种方法可以在Javascript中访问相同的变量(可能使用DOM,我不知道Django如何使变量可访问)?我希望能够根据传入的变量中包含的值使用AJAX查找详细信息。
当前回答
我发现我们可以这样传递Django变量到javascript函数:-
<button type="button" onclick="myJavascriptFunction('{{ my_django_variable }}')"></button>
<script>
myJavascriptFunction(djangoVariable){
alert(djangoVariable);
}
</script>
其他回答
我在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>
我也一直在挣扎。表面上看,上述解决方案似乎是可行的。然而,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>。 当然,这只是关于获取内容。关于安全问题,请参考其他答案。
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 }}
{{variable}}被直接替换到HTML中。做一个查看源码;它不是一个“变量”或类似的东西。它只是渲染文本。
话虽如此,您可以在JavaScript中加入这种替换。
<script type="text/javascript">
var a = "{{someDjangoVariable}}";
</script>
这为您提供了“动态”javascript。
有许多答案指向json_script。与人们可能认为的相反,这并不是一个万能的解决方案。
例如,当我们想要将在For循环中生成的动态变量传递给JavaScript时,最好使用data-attributes之类的东西。
点击这里查看更多细节。