我正在嘗試使用由 Flask 組織的服務器通過 p5js 以 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>
起初，實際上，它看起來是，在瓶，HTML無法讀取p5.js和sketch.js正確。錯誤代碼是Failed to load resource: the server responded with a status of 404 (NOT FOUND)
其次，我可以通過 以 HTML 格式打開 JSON 檔案{{data_json}}，但是如何傳輸到sketch.js它以便用于可視化？
我應該怎么做才能修復它？真的很感謝你的幫助！
uj5u.com熱心網友回復：
理想情況下，您的 JavaScript 將通過 Fetch API 為資料發出自己的 HTTP 請求。這允許您快取 HTML，同時將這些資料分開。
但在某些情況下，將資料直接構建到 HTML 中確實有意義。在這些時候，您可以使用腳本標記并在該腳本標記內再次將資料序列化為 JSON。
因此，在您的模板中：
<script>
const data = /* your code to serialize and output data here */;
</script>
這將設定全域變數data，它可以從您的其他腳本訪問。使用 JSON 序列化可確保您的資料與 JavaScript 兼容，而不必擔心任何額外的轉義。也就是說，序列化為 JSON 的資料可以被 JavaScript 引擎解釋，不會像任意腳本那樣泄露資料。
uj5u.com熱心網友回復：
實際上，您不需要任何 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 應該顯示該物件。
轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/386274.html
標籤：javascript Python html json 烧瓶