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

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


当前回答

您可以组装整个脚本,其中数组变量是在字符串中声明的,如下所示:

views.py

    aaa = [41, 56, 25, 48, 72, 34, 12]
    prueba = "<script>var data2 =["
    for a in aaa:
        aa = str(a)
        prueba = prueba + "'" + aa + "',"
    prueba = prueba + "];</script>"

这将生成如下所示的字符串

prueba = "<script>var data2 =['41','56','25','48','72','34','12'];</script>"

获得该字符串后,必须将其发送到模板

views.py

return render(request, 'example.html', {"prueba": prueba})

在模板中,您接收到它,并以一种文学的方式将其解释为HTM代码,例如,就在需要它的javascript代码之前

模板

{{ prueba|safe  }}

下面是代码的其余部分,请记住在示例中使用的变量是data2

<script>
 console.log(data2);
</script>

这样就可以保持数据的类型,在本例中是一种安排

其他回答

一个对我有用的解决方案是在模板中使用隐藏的输入字段

<input type="hidden" id="myVar" name="variable" value="{{ variable }}">

然后以这种方式获取javascript的值,

var myVar = document.getElementById("myVar").value;

对于作为文本存储在Django字段中的JavaScript对象,它需要再次成为动态插入到页面脚本中的JavaScript对象,您需要同时使用escapejs和JSON.parse():

var CropOpts = JSON.parse("{{ profile.last_crop_coords|escapejs }}");

Django的escapejs正确地处理引用,JSON.parse()将字符串转换回JS对象。

请查看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 }}')">

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

您可以组装整个脚本,其中数组变量是在字符串中声明的,如下所示:

views.py

    aaa = [41, 56, 25, 48, 72, 34, 12]
    prueba = "<script>var data2 =["
    for a in aaa:
        aa = str(a)
        prueba = prueba + "'" + aa + "',"
    prueba = prueba + "];</script>"

这将生成如下所示的字符串

prueba = "<script>var data2 =['41','56','25','48','72','34','12'];</script>"

获得该字符串后,必须将其发送到模板

views.py

return render(request, 'example.html', {"prueba": prueba})

在模板中,您接收到它,并以一种文学的方式将其解释为HTM代码,例如,就在需要它的javascript代码之前

模板

{{ prueba|safe  }}

下面是代码的其余部分,请记住在示例中使用的变量是data2

<script>
 console.log(data2);
</script>

这样就可以保持数据的类型,在本例中是一种安排