Django技术疑问：如何将Python变量传递至JavaScript文件？

我之前也碰到过一模一样的困扰！独立JS文件没法直接读取Django模板变量，核心原因是模板渲染时，静态JS文件不会被Django的模板引擎处理——等浏览器加载JS文件的时候，模板变量早就渲染完了。给你几个我亲测有效的解决方案：

方法一：在模板中定义全局JS变量（最简单直接） #

在你的map.html里，先于独立JS文件加载的位置，把模板变量赋值给全局window对象的属性：

<!-- 在加载独立JS前定义全局变量 -->
<script>
// 用|safe过滤器确保渲染后的内容是合法的JS格式
window.mapLatLng = {{ lat_lng|safe }};
</script>

<!-- 再加载你的独立JavaScript文件 -->
<script src="{% static 'js/your-map-script.js' %}"></script>

然后在你的独立JS文件里，直接调用这个全局变量就行：

// 独立JS文件中使用
console.log(window.mapLatLng);
// 比如初始化地图
initMap(window.mapLatLng[0], window.mapLatLng[1]);

⚠️ 注意：如果你的lat_lng是Python的列表/字典，一定要先在views.py里用json.dumps()转成JSON格式：

import json

def your_view(request):
    lat_lng = [39.9042, 116.4074]  # 示例经纬度
    # 转成JSON字符串，确保模板渲染后是合法的JS数据结构
    lat_lng_json = json.dumps(lat_lng)
    return render(request, 'map.html', {'lat_lng': lat_lng_json})

方法二：用HTML元素的data属性（更规范，不污染全局变量） #

如果不想用全局变量，可以把数据存在HTML元素的自定义data属性里：

<!-- 在map.html中添加隐藏元素存储数据 -->
<div id="map-data" data-latlng="{{ lat_lng|safe }}" style="display: none;"></div>

然后在独立JS文件中，通过DOM读取这个属性：

// 独立JS文件中获取数据
const mapDataElement = document.getElementById('map-data');
const latLngData = JSON.parse(mapDataElement.dataset.latlng);

// 使用数据
console.log(latLngData);

这个方法更符合前端规范，避免全局变量冲突。

你之前可能踩的坑 #

• 没把Python数据转成JSON：如果直接传Python列表，模板渲染后会变成[39.9042, 116.4074]（带空格），JS可能识别出错，必须用json.dumps()转成标准JSON字符串。
• 加载顺序错误：如果独立JS文件先于全局变量定义加载，那JS执行时变量还不存在，一定要确保变量定义在JS加载之前。
• 没加|safe过滤器：Django默认会转义特殊字符，导致渲染后的字符串多了转义符，JS解析失败，必须加|safe让模板直接输出原始JSON。

内容的提问来源于stack exchange，提问作者L Lawliet