如何读取 JSON 文件并传输到 Flask 组织的 HTML 中的 Javascript？
Posted
技术标签:
【中文标题】如何读取 JSON 文件并传输到 Flask 组织的 HTML 中的 Javascript？【英文标题】：How to read JSON file and transmit to Javascript in HTML organized by Flask? 【发布时间】：2022-01-20 19:56:04 【问题描述】：我正在尝试通过 p5js 使用 Flask 组织的服务器以 JSON 格式可视化一堆数据。
假设我有一个 JSON 文件 data.json
["a":"1","b":"2","c","3"]
而我的 Python 代码是：
from flask import *
app = Flask(__name__)
def index():
data_list = json.load(open('data.json'))
data_json = json.dumps(data_list)
return render_template("index.html", data_json=data_json)
if __name__ == '__main__':
app.run(port=7775)
到目前为止，我想出了如何将我的 JSON 文件发送到 HTML，但是如何通过 p5js 读取 HTML 中的 JSON 文件呢？这是我的 HTML 代码：
<!DOCTYPE html>
<html>
<head>
<script src="js/p5.js"></script>
<script src="sketch.js"></script>
</head>
<body>
Hello
</body>
</html>
实际上，起初看起来，在 Flask 中，HTML 无法正确读取 p5.js 和 sketch.js。错误代码为Failed to load resource: the server responded with a status of 404 (NOT FOUND)
其次，我可以通过data_json打开HTML格式的JSON文件，但是如何传输到sketch.js以便可视化？
我应该怎么做才能修复它？非常感谢您的帮助！
【问题讨论】：
【参考方案1】：理想情况下，您的 javascript 会通过 Fetch API 对数据发出自己的 HTTP 请求。这允许您缓存 HTML，同时保持数据分离。
但在某些情况下，将数据直接构建到 HTML 中确实有意义。在这些时候，您可以使用脚本标签并在该脚本标签内再次将数据序列化为 JSON。
所以，在您的模板中：
<script>
const data = /* your code to serialize and output data here */;
</script>
这将设置全局变量data，您可以从其他脚本访问该变量。使用 JSON 序列化可确保您的数据与 JavaScript 兼容，而无需担心任何额外的转义。也就是说，序列化为 JSON 的数据可以被 JavaScript 引擎解释，数据不会作为任意脚本泄露出去。
【讨论】：
我明白了你的想法。如果我在HTML中设置了全局变量data，我的<script src="sketch.js"></script>封装的javascript代码可以直接使用吗？我可以在sketch.js 文件中使用它，还是应该做任何初始化工作？
是的，如果该数据设置在全局变量中，在这种情况下，您将能够在 sketch.js 中访问它。【参考方案2】：
实际上，您不需要任何 python 或库。你可以使用这个功能：
function readTextFile(file)
let rawFile = new XMLHttpRequest();
rawFile.open("GET", file, false);
let txt = '';
rawFile.onreadystatechange = function ()
if(rawFile.readyState === 4)
if(rawFile.status === 200 || rawFile.status == 0)
var allText = rawFile.responseText;
txt = allText;
rawFile.send(null);
return txt;
并获取文件的内容。
使用JSON.parse() 把它变成一个对象：
let variable = JSON.parse(readTextFile('info.json'))
document.getElementById('hi').innerHTML = variable;
html:
<p id='hi'></p>
您的 html 应该显示该对象。
【讨论】：
这依赖于使用async = false，这是一种可怕的做法，已被浏览器供应商弃用。请停止建议这种做法。在现代浏览器中，fetch() 也取代了 XMLHttpRequest
你是对的。我正在尝试使用 Flask，因为我想通过不断运行 python 来不断收集数据。但是我现在还没有想出如何将 Flask 和这个函数结合起来。谢谢你的帮助！另外，能告诉我为什么会出现404错误吗？以上是关于如何读取 JSON 文件并传输到 Flask 组织的 HTML 中的 Javascript？的主要内容，如果未能解决你的问题，请参考以下文章