一尘不染

通过Django将Python数据传递给JavaScript

django

我正在使用Django和Apache来提供网页。我的JavaScript代码当前包含一个数据对象,该数据对象的值将基于用户从选项菜单中的选择而显示在各种HTML小部件中。我想从Python字典中导出这些数据。我想我知道如何将JavaScript代码嵌入HTML中,但是如何(即时)将数据对象嵌入该脚本中,以便脚本的功能可以使用它?

换句话说,我想从Python字典中创建一个JavaScript对象或数组,然后将该对象插入JavaScript代码,然后将该JavaScript代码插入HTML。

我认为这种结构(例如,嵌入JavaScript代码中变量中的数据)不是最理想的,但是作为一个新手,我不知道替代方案。我见过Django序列化功能的文章,但这些文章对我没有帮助,直到我首先将数据放入我的JavaScript代码中为止。

我(尚未)使用jQuery之类的JavaScript库。


阅读 1570

收藏
2020-03-27

共1个答案

一尘不染

我建议不要在Django模板中放置太多JavaScript-往往很难编写和调试,尤其是在项目扩展时。相反,尝试将所有JavaScript写入一个单独的脚本文件中,以供模板加载,并在模板中仅包含JSON数据对象。这使你可以执行诸如通过JSLint等操作整个JavaScript应用程序,对其进行缩小等操作,并且可以使用静态HTML文件对其进行测试,而无需依赖Django应用程序。使用诸如simplejson之类的库还可以节省你花费大量时间编写繁琐的序列化代码。

如果你不假设自己正在构建AJAX应用,则可以这样简单地完成操作:

在视图中:

from django.utils import simplejson

def view(request, …):
    js_data = simplejson.dumps(my_dict)
    …
    render_template_to_response("my_template.html", {"my_data": js_data, …})

在模板中:

<script type="text/javascript">
    data_from_django = {{ my_data }};
    widget.init(data_from_django);
</script>

请注意,数据类型很重要:如果my_data是简单数字或受控来源(不包含HTML)(例如格式化日期)中的字符串,则不需要特殊处理。如果有可能由用户提供不受信任的数据,则需要使用escape或escapejs过滤器之类的方法对其进行清理,并确保你的JavaScript安全地处理数据,以避免跨站点脚本攻击。

就日期而言,你可能还需要考虑如何传递日期。我几乎总是发现最容易将它们作为Unix时间戳传递:

在Django中:

time_t = time.mktime(my_date.timetuple())

在JavaScript中,假设你time_t = {{ time_t }}对上述代码段的结果做了类似的处理:

my_date = new Date();
my_date.setTime(time_t*1000);

最后,请注意UTC-你将希望Python和Django日期函数以UTC交换数据,以避免尴尬地偏离用户本地时间。

编辑:请注意,javascript中的setTime以毫秒为单位,而time.mktime的输出为秒。这就是为什么我们需要乘以1000

2018更新:我仍然喜欢将JSON用于复杂值,但是在随后的十年中,HTML5数据API已经获得了通用浏览器的支持,并且非常方便地传递简单的(非列表/字典)值,特别是如果你希望使用CSS规则会根据这些值应用,并且你不必担心Internet Explorer的不受支持版本。

<div id="my-widget" data-view-mode="tabular">…</div>

let myWidget = document.getElementById("my-widget");
console.log(myWidget.dataset.viewMode); // Prints tabular
somethingElse.addEventListener('click', evt => {
    myWidget.dataset.viewMode = "list";
});

如果你想在Django模板中设置初始视图状态,并在JavaScript更新data-属性时使它自动更新,则这是一种将数据公开给CSS的好方法。我将其用于诸如隐藏进度窗口小部件之类的事情,直到用户根据获取结果选择要处理的东西或有条件地显示/隐藏错误,甚至使用CSS之类的显示活动记录数之类的东西#some-element::after { content: attr(data-active-transfers); }

2020-03-27