如何在 JavaScript 文件中使用 Django 变量？答案

【问题标题】：How to use Django variable in JavaScript file?如何在 JavaScript 文件中使用 Django 变量？
【发布时间】：2016-08-09 21:38:10
【问题描述】：

我知道我们可以通过 {{variable}} 在模板（html 文件）中使用 Django 变量，但是如何在模板中包含的 Javascript 文件中使用变量 Django？

例如这里是我的template.html：

<html>
<head>
<script src="/static/youtube.js"></script>
...

如何在 youtube.js 中使用变量 {{user.get_username}}？不在 template.html 中，因为我没有在这里写我的脚本......当我在 Javascript 文件 youtube.js 中使用 {{user.get_username}} 时，它会导致错误“invalid token {”，但在模板中它可以工作很好。

非常感谢！

【问题讨论】：

标签： javascript python django html

【解决方案1】：

你需要在你的脚本标签之前打印它

<html>
<head>
<script>
    var username = {{user.get_username}};
</script>
<script src="/static/youtube.js"></script>
...

然后您可以在 youtube.js 中使用 username 变量，因为它被声明为 javascript 全局变量。

【讨论】：

事实上后来我得到了一个错误，例如我的用户名是汤姆，控制台窗口中有什么：Uncaught ReferenceError: Tom is not defined
这是因为你使用Tom作为变量名，而“Tom”是变量username的内容
不，我是以“Tom”这个名字登录的，我在脚本中使用了 var username = {{user.get_username}} 但我得到了错误
如果您收到错误提示 Tom 未定义，是因为您试图将其用作变量。请告诉我您正在尝试什么，我会尽力帮助您，但这与您的原始问题无关。
我按照您的建议在模板中定义了一个变量全局用户名，并且我的标签有一个属性所有者名称...看来我应该使用 var username = "{{user.get_username}}" 原因所有者名称是字符串，非常感谢我的问题解决了:)

【解决方案2】：

使用较新版本的 Django，他们实现了一种方法。这样你也可以免受 XSS 的攻击

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

在您的 Django 变量中添加 |json_script:'id_of_the_script_tag'

{{ cart_total|json_script:'cart_total' }}

这将创建一个带有 id=cart_total 的 HTML <script> 标记

在 javascript 文件中解析 JSON 并将其保存在您的变量中

const cart_total = JSON.parse(document.getElementById('cart_total').textContent);

【讨论】：

【解决方案3】：

上述解决方案几乎是正确的，只需将 Django 变量更改为 String 即可。

<html>
<head>
<script>
    var username = "{{user.get_username}}";
</script>
<script src="/static/youtube.js"></script>

【讨论】：

如果值为字符串，这是正确的