Django 变量如何在外部 JS 中调用？

本教程旨在解决在 Django 项目中，如何在外部 JavaScript 文件中访问 Django 模板变量的问题。我们将探讨两种常用的方法：通过在模板中声明 JavaScript 变量，以及利用 HTML 元素的 data 属性传递数据。通过这些方法，可以轻松地将 Django 后端数据传递到前端 JavaScript 代码中，实现动态交互。

在 Django Web 开发中，经常需要在 JavaScript 代码中使用后端传递过来的数据，例如在页面加载时根据用户权限显示不同的内容，或者根据后端数据动态更新页面元素。直接在外部 JavaScript 文件中访问 Django 变量是不可能的，因为 JavaScript 文件在浏览器端执行，无法直接访问服务器端的变量。但是，可以通过一些技巧来实现这个目标。

方法一：在 Django 模板中声明 JavaScript 变量

最直接的方法是在 Django 模板中使用 <script> 标签声明 JavaScript 变量，并将 Django 变量的值赋给它。这样，在外部 JavaScript 文件中就可以直接访问这个变量了。

示例：

在你的 Django 模板文件中（例如 template.html），添加以下代码：

<script type="text/javascript">
  var myVar = "{{ django_variable }}";
</script>
<script src="{% static 'js/external.js' %}"></script>

在这个例子中，django_variable 是你在 Django 视图函数中传递给模板的变量。Django 模板引擎会将 {{ django_variable }} 替换为实际的值。{% static 'js/external.js' %} 用于加载你的外部 JavaScript 文件，确保正确引用静态文件。

然后在你的外部 JavaScript 文件 external.js 中，就可以直接访问 myVar 变量了：

console.log(myVar); // 输出 Django 变量的值

注意事项：

• 确保 <script> 标签在引用外部 JavaScript 文件之前声明，否则 JavaScript 文件可能无法访问该变量。
• 这种方法适用于简单的变量类型，例如字符串、数字等。对于复杂的数据结构，例如列表或字典，建议使用 JSON 序列化。

方法二：使用 HTML 元素的 data 属性

另一种方法是使用 HTML 元素的 data-* 属性来存储 Django 变量的值，然后在 JavaScript 中通过 DOM 操作来获取这些属性的值。

示例：

在你的 Django 模板文件中，添加一个带有 data-* 属性的 HTML 元素：

<div id="myElement" data-myvar="{{ django_variable }}"></div>
<script src="{% static 'js/external.js' %}"></script>

这里，data-myvar 属性存储了 Django 变量 django_variable 的值。

然后在你的外部 JavaScript 文件 external.js 中，可以使用 document.getElementById() 方法获取该元素，并使用 getAttribute() 方法获取 data-myvar 属性的值：

var myVar = document.getElementById('myElement').getAttribute('data-myvar');
console.log(myVar); // 输出 Django 变量的值

注意事项：

• data-* 属性的值始终是字符串类型。如果你的 Django 变量是数字类型，需要将其转换为数字类型，例如使用 parseInt() 或 parseFloat() 函数。
• 确保在 JavaScript 代码执行之前，HTML 元素已经加载完成。可以将 JavaScript 代码放在 window.onload 事件处理函数中，或者将 <script> 标签放在 HTML 文件的底部。
• 可以使用 dataset 属性更方便地访问 data-* 属性的值。例如，document.getElementById('myElement').dataset.myvar。

总结

这两种方法都可以在外部 JavaScript 文件中访问 Django 变量。选择哪种方法取决于你的具体需求和偏好。第一种方法更直接，适用于简单的变量类型。第二种方法更灵活，可以用于存储更复杂的数据结构，并且可以避免全局变量污染。无论选择哪种方法，都需要注意数据类型转换和 HTML 元素加载顺序等问题。通过合理运用这些技巧，可以轻松地将 Django 后端数据传递到前端 JavaScript 代码中，实现更加动态和交互式的 Web 应用。