如何读取JSON文件并传输到Z9784E91C7B26579789ZAF组织的HTML中的Javascript？

Question

我正在尝试通过 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，但是如何读取 JSON 文件到 Z4C4ZDBAD5FCAjsED0381A3F 中的 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以便它可以用于可视化？

我应该怎么做才能修复它？ 非常感谢您的帮助！

Answer 1

理想情况下，您的 JavaScript 将通过获取 API 对数据发出自己的 HTTP 请求。 这允许您缓存 HTML，同时保持数据分离。

但在某些情况下，将数据直接构建到 HTML 中确实有意义。 对于这些时候，您可以使用脚本标签并在该脚本标签内再次将数据序列化为 JSON。

因此，在您的模板中：

<script>
  const data = /* your code to serialize and output data here */;
</script>

这将设置全局变量data ，您可以从其他脚本访问该变量。 使用 JSON 序列化可确保您的数据与 JavaScript 兼容，而无需担心任何额外的 escaping。 即序列化为JSON的数据可以被JavaScript引擎解释，数据不会作为任意脚本泄露出去。

Answer 2

It's not easy passing python template data to javascript directly so what most people do to achieve the implementation of the functionality of retrieving data is by assigning it to a given html element and querying the element using javascript.

你可以签出这个答案回答了一个类似的问题

Answer 3

实际上，您不需要任何 python 或库。 您可以使用这个 function：


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()将其变成 object：

let variable = JSON.parse(readTextFile('info.json'))
document.getElementById('hi').innerHTML = variable;

html： <p id='hi'></p>

您的 html 应该显示 object。

如何读取JSON文件并传输到Z9784E91C7B26579789ZAF组织的HTML中的Javascript？

问题描述

2 个解决方案

解决方案1
0 2021-12-18 03:42:29

解决方案2
0 2021-12-18 03:46:54

解决方案3
-2 2021-12-18 03:47:07

如何读取JSON文件并传输到Z9784E91C7B26579789ZAF组织的HTML中的Javascript？

问题描述

2 个解决方案

解决方案1 0 2021-12-18 03:42:29

解决方案2 0 2021-12-18 03:46:54

解决方案3 -2 2021-12-18 03:47:07

解决方案1
0 2021-12-18 03:42:29

解决方案2
0 2021-12-18 03:46:54

解决方案3
-2 2021-12-18 03:47:07