Django与JavaScript交互：从Django向外部JS传递数据的策略-Python教程-PHP中文网

Django与JavaScript交互：从Django向外部JS传递数据的策略

本文详细介绍了在Django项目中，如何安全有效地将后端变量传递给前端外部JavaScript文件的两种主要方法：通过在模板内声明全局JavaScript变量，以及利用HTML数据属性。文章提供了具体的代码示例，并讨论了数据类型转换、安全性及选择合适方法的考量，旨在帮助开发者实现Django与前端逻辑的无缝集成。

在django web开发中，经常需要将后端视图（views.py）中处理的数据或状态传递给前端的javascript代码，特别是当javascript代码被组织在独立的外部文件中时。直接在外部javascript文件中访问django模板变量是不可行的，因为外部js文件在浏览器端加载，不经过django模板引擎的渲染。为了解决这个问题，通常采用以下两种策略。

1. 通过内联 <script> 标签声明全局变量

这是最直接且常用的方法之一。在Django模板中，可以在外部JavaScript文件加载之前，使用内联的 <script> 标签声明一个全局JavaScript变量，并将Django变量的值嵌入其中。外部JavaScript文件加载后，就可以直接访问这个全局变量。

实现步骤：

讯飞智作-讯飞配音

讯飞智作是一款集AI配音、虚拟人视频生成、PPT生成视频、虚拟人定制等多功能的AI音视频生产平台。已广泛应用于媒体、教育、短视频等领域。

查看详情

在Django模板中嵌入变量： 在HTML模板文件（例如 my_template.html）的 <head> 或 <body> 部分，但在引用外部JavaScript文件之前，添加一个 <script> 标签来声明JavaScript变量。
```

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>Django变量传递示例</title>
</head>
<body>
    <h1>欢迎来到我的网站</h1>

    
    <script type="text/javascript">
        // 假设 'is_empty' 是从Django视图传递过来的变量
        var isEmptyStatus = "{{ is_empty|default:'0' }}"; // 使用default过滤器避免空值错误
        var userName = "{{ user.username|escapejs }}"; // 传递字符串，使用escapejs确保安全
        var configData = {{ some_json_data|safe }}; // 传递JSON对象，确保safe过滤器
    </script>

    
    <script src="{% static 'js/my_external_script.js' %}"></script>
</body>
</html>
```
登录后复制
- {{ is_empty|default:'0' }}: 确保即使 is_empty 为空，也会有一个默认值，避免JavaScript变量声明为空字符串。
- {{ user.username|escapejs }}: 当传递字符串时，尤其是用户输入内容，使用 escapejs 过滤器可以有效防止跨站脚本（XSS）攻击，它会将特殊字符转义。
- {{ some_json_data|safe }}: 如果要传递一个Django字典或列表，并希望在JavaScript中作为JSON对象使用，可以先在Python视图中将其转换为JSON字符串（例如使用 json.dumps()），然后在模板中使用 safe 过滤器，告诉Django这部分内容是安全的，不需要进一步转义。

在外部JavaScript文件中访问变量： 在 static/js/my_external_script.js 文件中，可以直接使用在模板中声明的全局变量。

// static/js/my_external_script.js

// 访问在模板中声明的全局变量
console.log("isEmptyStatus:", isEmptyStatus);
console.log("userName:", userName);
console.log("configData:", configData);

// 示例：根据变量值执行逻辑
if (Number(isEmptyStatus) === 1) {
    console.log("列表是空的，请添加内容！");
    // 执行相关UI操作
} else {
    console.log("列表有内容。");
}

// 访问JSON对象
if (configData && configData.featureEnabled) {
    console.log("某个特性已启用。");
}

登录后复制

注意事项：

全局变量污染： 这种方法会创建全局变量，如果变量名不规范或过多，可能会造成全局命名空间的污染，与其他脚本产生冲突。
数据类型转换： 从Django模板传递过来的所有值在JavaScript中默认都是字符串。如果需要数字、布尔值或对象，需要手动进行类型转换（如 Number(), Boolean(), JSON.parse()）。
安全性： 对于用户生成的内容，务必使用 escapejs 过滤器进行转义，防止XSS攻击。对于后端生成且确定安全的JSON数据，可以使用 safe 过滤器。

2. 利用HTML数据属性（Data Attributes）

另一种更推荐且更符合HTML5语义化的方法是使用HTML5的 data-* 属性。您可以将Django变量的值存储在HTML元素的自定义数据属性中，然后通过JavaScript获取这些属性的值。

立即学习“Java免费学习笔记（深入）”；

实现步骤：

在Django模板中将变量嵌入数据属性： 在Django模板中，创建一个HTML元素（例如 div），并为其添加 data-* 属性，将Django变量的值赋给这些属性。

<!-- my_template.html -->
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>Django变量传递示例</title>
</head>
<body>
    <h1>欢迎来到我的网站</h1>

    <!-- 将Django变量嵌入HTML数据属性 -->
    <div id="app-data"
         data-is-empty="{{ is_empty|default:'0' }}"
         data-user-name="{{ user.username|escapejs }}"
         data-config-json="{{ some_json_data|safe }}">
    </div>

    <!-- 引用外部JavaScript文件 -->
    <script src="{% static 'js/my_external_script.js' %}"></script>
</body>
</html>

登录后复制

data-is-empty, data-user-name, data-config-json 是自定义的数据属性名。
同样需要注意 default、escapejs 和 safe 过滤器的使用。

在外部JavaScript文件中访问数据属性： 在 static/js/my_external_script.js 文件中，通过DOM操作获取对应的HTML元素，然后使用 dataset 属性或 getAttribute() 方法来访问数据属性的值。

// static/js/my_external_script.js

document.addEventListener('DOMContentLoaded', function() {
    var appDataElement = document.getElementById('app-data');

    if (appDataElement) { // 检查元素是否存在，避免getAttribute on null错误
        // 使用dataset属性（推荐，更简洁）
        var isEmptyStatus = appDataElement.dataset.isEmpty;
        var userName = appDataElement.dataset.userName;
        var configJsonString = appDataElement.dataset.configJson;

        // 如果是JSON字符串，需要解析
        var configData = {};
        try {
            configData = JSON.parse(configJsonString);
        } catch (e) {
            console.error("解析configJson失败:", e);
        }

        console.log("isEmptyStatus (from data attribute):", isEmptyStatus);
        console.log("userName (from data attribute):", userName);
        console.log("configData (from data attribute):", configData);

        // 示例：根据变量值执行逻辑
        if (Number(isEmptyStatus) === 1) {
            console.log("列表是空的，请添加内容！");
        } else {
            console.log("列表有内容。");
        }
    } else {
        console.error("未找到ID为 'app-data' 的元素。");
    }
});

登录后复制

document.addEventListener('DOMContentLoaded', function() { ... });：确保在DOM完全加载后再尝试获取元素，防止出现 null 错误。
appDataElement.dataset.isEmpty：这是获取 data-is-empty 属性值的推荐方式，它会自动将 data- 后面的连字符命名转换为驼峰命名。
appDataElement.getAttribute('data-is-empty')：也可以使用这种方式获取属性值。

注意事项：

元素依赖： JavaScript代码依赖于特定的HTML元素存在。如果该元素不存在，则无法获取数据。因此，在获取元素后进行 null 检查是良好的实践。
命名规范： data-* 属性名应遵循HTML属性命名规范，并在JavaScript中通过 dataset 访问时转换为驼峰命名。
数据类型： 同样，从数据属性获取的值也是字符串，需要手动进行类型转换。
安全性： 依然需要注意XSS风险，使用 escapejs 和 safe 过滤器。

总结与最佳实践

两种方法各有优缺点：

内联 <script> 声明全局变量： 简单直接，适合少量、简单的变量传递，但可能导致全局变量污染，且语义化不如数据属性。
HTML数据属性： 更符合HTML5语义化，将数据与相关DOM元素绑定，减少全局变量污染。适合传递与特定DOM元素相关的配置或状态数据。需要额外的DOM查询操作。

选择建议：

对于与特定UI组件或DOM元素紧密相关的数据，优先考虑使用数据属性。
对于少量、全局性的配置或状态（例如用户登录状态、API密钥等），可以考虑使用内联 <script> 声明全局变量，但请注意命名规范。
数据类型转换是关键。始终记住从Django模板传入JavaScript的值默认是字符串，根据需要进行 Number(), Boolean(), JSON.parse() 等转换。
安全性至关重要。始终对用户输入或可能包含特殊字符的数据使用 escapejs 过滤器。对于后端生成的JSON数据，如果确定内容安全且需要作为JSON对象使用，可以使用 safe 过滤器。
在外部JavaScript文件中访问DOM元素时，务必在 DOMContentLoaded 事件监听器内部执行，并对获取到的元素进行 null 检查，以避免运行时错误。

通过以上策略，开发者可以灵活且安全地在Django后端与前端外部JavaScript之间传递数据，实现丰富的交互功能。

以上就是Django与JavaScript交互：从Django向外部JS传递数据的策略的详细内容，更多请关注php中文网其它相关文章！