Python生成JSON后，JavaScript加载提示'data is not defined'问题求助

你遇到的data is not defined错误，核心原因是用<script>标签直接引入纯JSON文件的方式不对——浏览器会把引入的JSON内容当作JavaScript代码执行，但纯JSON只是一个对象字面量，并没有被赋值给名为data的变量，所以当你在代码里调用JSON.parse(data)时，data这个变量根本不存在。

下面给你两种可行的解决办法，按需选择：

方法1：修改Python脚本，生成带变量声明的JS文件 #

既然你原来想用script标签引入后直接用变量，那可以让Python生成的不是纯JSON，而是包含变量声明的JavaScript代码：

修改你的Python代码：

import json

data = {}
for i in range(t_final.size):
    data[i] = t_final[i]
# 生成JS文件，把JSON数据赋值给全局变量data
with open('data.js', 'w') as fp:
    fp.write(f"var data = {json.dumps(data)};")

然后在HTML里引入这个JS文件：

<script type="text/javascript" src="/cgi-bin/data.js"></script>
<script type="text/javascript" >
function load() {
    // 现在data已经是一个JavaScript对象了，不需要再JSON.parse
    var mydata = data;
    var div = document.getElementById('xbtn');
    // 这里可以添加处理mydata的逻辑，比如把内容显示到div里
    div.textContent = JSON.stringify(mydata);
}
// 记得调用load函数，比如页面加载完成时执行
window.addEventListener('load', load);
</script>
<div id="xbtn"></div>

方法2：用Fetch API异步加载JSON（更推荐的标准做法） #

如果你想保持Python生成纯JSON文件的逻辑不变，那应该用JavaScript的Fetch API（或者AJAX）来异步加载JSON，这是前端加载数据的标准方式：

修改你的JavaScript代码：

<script type="text/javascript" >
function load() {
    fetch('/cgi-bin/data.json')
        .then(response => {
            // 先检查请求是否成功
            if (!response.ok) {
                throw new Error(`请求失败，状态码：${response.status}`);
            }
            // 解析JSON数据
            return response.json();
        })
        .then(mydata => {
            var div = document.getElementById('xbtn');
            // 这里处理你的数据，比如显示到页面上
            div.textContent = JSON.stringify(mydata);
            console.log('加载的数据：', mydata);
        })
        .catch(error => {
            // 处理加载出错的情况
            console.error('加载JSON时出错：', error);
        });
}
// 页面加载完成后执行load函数
window.addEventListener('load', load);
</script>
<div id="xbtn"></div>

注意：这种方式需要确保你的服务器在返回data.json时，设置正确的MIME类型（application/json），否则可能会影响解析。

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