时间戳

首页 > 解决方案 > 如何将 dict 的 dict 从 Django 发送到 javascript

javascript - 如何将 dict 的 dict 从 Django 发送到 javascript

问题描述

我想将数据从 Django 发送到 JavaScript，这样我就可以在 JS + Vue 中编写所有逻辑并保持 html 干净。

在 Django 我有

context={'names':{'fn':'john','ln':'cena'}}
return render(request,'app/page1.html',context)

在page1.html模板中我有

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

在 javascript 中如何访问names.fn& names.ln？

我还有两个相关的问题：

  1. 这是呈现模板时直接从 Django 向 JS 发送数据的首选 Django 方式吗？（我知道的唯一其他方法是通过 Ajax 调用。这里我不想在呈现页面后进行额外的 Ajax 调用）
  2. 从安全的角度来看，将 Django 数据相关的逻辑保留{% if x > y %}在模板中会更好，还是可以将逻辑部分移动到 JS + Vue 并在模板中保留数据结构。我问这个是因为当我在浏览器窗口中检查页面源代码时，我可以看到整个 JS 代码，但我看不到 html 中的 Django 条件语句中的任何内容：{% if x>y %} ----THIS IS INVISIBLE IN A BROWSER---- {% endif %}

谢谢

标签： javascripthtmldjangovue.js

解决方案

有json_script：

{{names|json_script("names")}}

然后，在 JS 中：

var names = JSON.parse(document.getElementById('names').textContent);

或者，安装django-jsonify；那么，你可以直接说

{% load jsonify %}
<script type="text/javascript"> var names={{names|jsonify}}; </script>

至于你的第二个问题：Vue（或 Angular 或 React 或 Ractive 或 Knockout ......）所做的一切都是客户端，Django 所做的一切都是服务器端。如果您正在构建单页应用程序，您应该尽可能多地使用 Vue（或 Angular 或 React 或 Ractive 或 Knockout ......）；如果你不是，那么你可能不需要这样的框架。

推荐阅读