Django模板变量和Javascript

javascript python django google-app-engine django-templates

176467 观看

12回复

1119 作者的声誉

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

有没有办法在Javascript中访问相同的变量(也许使用DOM,我不知道Django如何使变量可访问)?我希望能够使用基于传入的变量中包含的值的AJAX查找来查找详细信息。

作者: AlMcLean 的来源 发布者: 2008 年 11 月 18 日

回应 (12)


261

327641 作者的声誉

决定

{{variable}}直接代入HTML。做一个观察源; 它不是“变量”或类似的东西。它只是渲染文本。

话虽如此,您可以将这种替换放入JavaScript中。

<script type="text/javascript"> 
   var a = "{{someDjangoVariable}}";
</script>

这为您提供了“动态”javascript。

作者: S.Lott 发布者: 18.11.2008 02:00

8

2744 作者的声誉

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

作者: jamtoday 发布者: 20.11.2008 08:19

43

900 作者的声誉

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

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

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

var myVar = document.getElementById("myVar").value;
作者: bosco- 发布者: 13.12.2011 01:15

9

613 作者的声誉

当Django返回变量时,它会将所有引号转换为&quot;。使用{{someDjangoVariable|safe}}导致Javascript错误。

要解决此问题,请使用Javascript .replace

<script type="text/javascript"> 
    var json = "{{someDjangoVariable}}".replace(/&quot;/g,"\"")
</script>
作者: Jon Sakas 发布者: 07.08.2013 03:22

53

9138 作者的声誉

小心检查故障#17419,了解有关在Django核心中添加类似标记的讨论,以及使用此模板标记和用户生成的数据引入的可能的XSS漏洞。来自amacneil的评论讨论了票证中提出的大部分问题。


我认为最灵活,最方便的方法是为要在JS代码中使用的变量定义模板过滤器。这样可以确保您的数据被正确转义,并且可以将其用于复杂的数据结构,例如dictlist。这就是为什么我写这个答案,尽管有很多赞成的答案已被接受。

以下是模板过滤器的示例:

// 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>
作者: Yaroslav Admin 发布者: 28.08.2014 12:14

7

227 作者的声誉

这是我正在做的很容易:我修改了我的模板的base.html文件并将其放在底部:

{% if DJdata %}
    <script type="text/javascript">
        (function () {window.DJdata = {{DJdata|safe}};})();
    </script>
{% endif %}

然后,当我想在javascript文件中使用变量时,我创建了一个DJdata字典,并通过json将其添加到上下文中: context['DJdata'] = json.dumps(DJdata)

希望能帮助到你!

作者: Alexis Parakian 发布者: 13.03.2015 12:31

4

41 作者的声誉

我正面临着simillar问题,而S.Lott建议的答案为我工作。

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

但是,我想在此指出主要的实施限制。如果您计划将javascript代码放在不同的文件中,并将该文件包含在模板中。这不行。

仅当主模板和javascript代码位于同一文件中时,此方法才有效。可能django团队可以解决这个限制。

作者: Conquistador 发布者: 07.10.2015 05:03

2

9051 作者的声誉

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

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

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

作者: shacker 发布者: 07.03.2017 07:25

0

342 作者的声誉

请注意,如果要将变量传递给外部.js脚本,则需要在脚本标记之前添加另一个声明全局变量的脚本标记。

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

<script type="text/javascript" src="{% static "scripts/my_script.js" %}"></script>

data 在视图中定义如常见的 get_context_data

def get_context_data(self, *args, **kwargs):
    context['myVar'] = True
    return context
作者: Daniel Kislyuk 发布者: 16.10.2018 03:57

3

40 作者的声誉

我也一直在努力解决这个问题。从表面上看,上述解决方案似乎应该有效。但是,django体系结构要求每个html文件都有自己的渲染变量(即,{{contact}}渲染到contact.html,然后{{posts}}转到例如index.html,依此类推)。在另一方面,<script>标签后出现{%endblock%}base.htmlcontact.htmlindex.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;

并且只包含<script src="static/js/somecode.js"></script>base.html照常进行。当然这只是关于获取内容。关于安全性,请按照其他答案。

作者: Shoval Sadde 发布者: 09.11.2018 11:08

8

613 作者的声誉

从Django 2.1开始,专门为这个用例引入了一个新的内置模板标签:json_script

https://docs.djangoproject.com/en/2.1/ref/templates/builtins/#json-script

新标记将安全地序列化模板值并防止XSS。

作者: Jon Sakas 发布者: 19.01.2019 07:53

0

361 作者的声誉

你可以组装整个脚本,在字符串中声明你的字典变量,如下所示,

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>

这样你将保留数据类型,在这种情况下是一种安排

作者: Daniel Muñoz 发布者: 12.08.2019 06:58
32x32