Django 模板变量和 Javascript

IT技术 javascript python django google-app-engine django-templates
2021-01-14 19:34:38

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

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

6个回答

{{variable}}直接代入HTML。做一个查看源码;它不是“变量”或类似的东西。它只是呈现的文本。

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

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

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

请注意,根据此解决方案,这很容易受到注入攻击
2021-03-11 19:34:38
只是添加到此以供参考:如果“someDjangoVariable”恰好是 JSON,请务必使用 {{ someDjangoVariable|safe }} 删除“;
2021-03-16 19:34:38
10 年后,Django 专门为此引入了一个内置模板过滤器:docs.djangoproject.com/en/2.1/ref/templates/builtins/...
2021-03-23 19:34:38
@Casebash:对于这种情况,escapejs过滤器存在:escapejs('<>') -> u'\\u003C\\u003E'
2021-03-26 19:34:38
如果 javascript 写在不同的文件中怎么办?
2021-03-31 19:34:38

小心检查票号#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>
@Sandi 当我发布它时,在单独的 JS 文件中有一个小部件并在页面源代码中对其进行初始化是很常见的。因此,假设您function myWidget(config) { /* implementation */ }在 JS 文件中声明,然后在某些使用myWidget({{ pythonConfig | js }}). 但是你不能在 JS 文件中使用它(正如你注意到的),所以它有它的局限性。
2021-03-18 19:34:38
@JorgeOrpinel 不,不一样。safe只将值标记为安全,没有适当的转换和转义。
2021-03-19 19:34:38
2021-03-21 19:34:38
那么如何在 django 模板中显示变量呢?
2021-03-27 19:34:38
这很好,因为它只允许将一些 Django 模板输入变量复制到 Javascript,并且服务器端代码不需要知道 Javascript 必须使用哪些数据结构,因此在呈现 Django 模板之前将其转换为 JSON。要么使用它,要么总是将所有 Django 变量复制到 Javascript。
2021-03-28 19:34:38

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

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

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

var myVar = document.getElementById("myVar").value;
如果它不会改变数据库或不会被发送到数据库查询,这会很好。@安迪
2021-03-15 19:34:38
您可能还想将输入字段设置为只读(请参阅此链接w3schools.com/tags/att_input_readonly.asp
2021-03-18 19:34:38
请谁能告诉我您将如何访问外部 JavaScript 文件中的该变量?
2021-03-23 19:34:38
伙计们……无论如何,用户都可以做他们想做的事。如今,浏览器通过功能齐全的 DOM 检查器和调试工具让这一切变得如此简单。故事寓意:在服务器上进行所有数据验证
2021-03-30 19:34:38
不过要小心。根据您使用变量/表单的方式,用户可以输入他们想要的任何内容。
2021-04-08 19:34:38

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

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

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

Django 文档摘录:

安全地将 Python 对象输出为 JSON,包装在标签中,准备与 JavaScript 一起使用。

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

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

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

希望能帮助到你!

不要使用它,它容易受到脚本注入 (XSS) 的影响。
2021-04-06 19:34:38