我的 python Flask 服務器中有一組串列，即c_data、data、targetx、和。它們看起來如下所示：targetysizexsizey
c_data: ['{"pencil":[[{"startx":183,"starty":165,"endx":183,"endy":167,"thick":2,"color":"#000000"},{"startx":183,"starty":167,"endx":187,"endy":169,"thick":2,"color":"#000000"},{"startx":187,"starty":169,"endx":188,"endy":171,"thick":2,"color":"#000000"},{"startx":188,"starty":171,"endx":190,"endy":172,"thick":2,"color":"#000000"},{"startx":190,"starty":172,"endx":190,"endy":174,"thick":2,"color":"#000000"},{"startx":190,"starty":174,"endx":191,"endy":174,"thick":2,"color":"#000000"},{"startx":191,"starty":174,"endx":191,"endy":174,"thick":2,"color":"#000000"}]],"line":[],"rectangle":[],"circle":[],"eraser":[],"last_action":[0]}']
data: ['data:image/png;base64,iVBORw0KG.......(basically a very long string of base64 encoding)]
targetx: [369]
targety: [252]
sizex: [100]
sizey: [100]
（c_data在js檔案中宣告為canvas_data = {"pencil": [], "line": [], "rectangle": [], "circle": [], "eraser": [], "last_action": [] };，這可以幫助你更好地理解結構c_data）
如何傳遞這些串列以便我可以在 JS 中再次閱讀它們？
這是我嘗試過的，在app.py檔案中，我首先執行以下操作將資料發送到腳本：
c_data = json.dumps(c_data)
data = json.dumps(data)
targetx = json.dumps(targetx)
targety = json.dumps(targety)
sizex = json.dumps(sizex)
sizey = json.dumps(sizey)
return jsonify({'result': 'success', 'c_data': c_data, 'data': data, 'targetx': targetx, 'targety': targety, 'sizex': sizex, 'sizey': sizey})
我通過渲染 HTML 將它傳遞給 Jinja，我在 JavaScript 中還有一個名為 的函式pencil()，使用它我嘗試過這樣的事情：
<body onload="pencil(`{{ c_data }}`, `{{ data }}`, `{{ targetx }}`, `{{ targety }}`, `{{ sizex }}`, `{{ sizey }}`)">
在我的script.js中，我通過以下方式使用傳遞的資料來讀取它們：
async function loadImages(c_data, data, targetX, targetY, targetWidth, targetHeight) {
c_data = c_data.replace(/'/g, '"');
data = data.replace(/'/g, '"');
targetX = targetX.replace(/'/g, '"');
targetY = targetY.replace(/'/g, '"');
targetWidth = targetWidth.replace(/'/g, '"');
targetHeight = targetHeight.replace(/'/g, '"');
c_data = JSON.parse(c_data);
data = JSON.parse(data);
targetX = JSON.parse(targetX);
targetY = JSON.parse(targetY);
targetWidth = JSON.parse(targetWidth);
targetHeight = JSON.parse(targetHeight);
for (var i = 0; i < data.length; i ) {
var tx = parseInt(targetX[i]);
var ty = parseInt(targetY[i]);
var tw = parseInt(targetWidth[i]);
var th = parseInt(targetHeight[i]);
var img = {
src: await loadImage(data[i], i),
c_data: c_data[i],
ul: {
x: tx,
y: ty
},
ur: {
x: tx tw,
y: ty
},
ll: {
x: tx,
y: ty th
},
lr: {
x: tx tw,
y: ty th
}
};
images.push(img)
}
draw_canvas();
}
使用這種方法，所有資料都可以正常作業，除了 c_data，它沒有轉換為canvas_data我期望的物件型別，并且在其字串中有一些反斜杠。當我嘗試使用該行洗掉反斜杠時c_data = c_data.replace(/\\/g, '');，出現錯誤：
Uncaught (in promise) SyntaxError: Unexpected token p in JSON at position 4
如何正確地將上述資料型別決議為 JS 并讀取它們？
uj5u.com熱心網友回復：
從您的解釋中推斷出您的代碼有點困難。
如果json.dumps在服務器上省略，則不必在瀏覽器中再次決議資料。這消除了當時不必要的JSON.parse.
資料可以通過多種方式從 Flask 傳遞到 JavaScript。
1）使用 tojson 過濾器：
一種可能性是像往常一樣將資料傳輸到模板，然后使用 Jinja 過濾器將其轉換為 JSON tojson。
from flask import (
Flask,
render_template
)
app = Flask(__name__)
@app.route('/')
def index():
c_data = {
"pencil":[
[
{"startx":183,"starty":165,"endx":183,"endy":167,"thick":2,"color":"#000000"},
{"startx":183,"starty":167,"endx":187,"endy":169,"thick":2,"color":"#000000"},
{"startx":187,"starty":169,"endx":188,"endy":171,"thick":2,"color":"#000000"},
{"startx":188,"starty":171,"endx":190,"endy":172,"thick":2,"color":"#000000"},
{"startx":190,"starty":172,"endx":190,"endy":174,"thick":2,"color":"#000000"},
{"startx":190,"starty":174,"endx":191,"endy":174,"thick":2,"color":"#000000"},
{"startx":191,"starty":174,"endx":191,"endy":174,"thick":2,"color":"#000000"}
]
],
"line":[],
"rectangle":[],
"circle":[],
"eraser":[],
"last_action":[0]
}
data = 'data:image/png;base64,iVBORw0KG.......(basically a very long string of base64 encoding)'
targetx = [369]
targety = [252]
sizex = [100]
sizey = [100]
return render_template('index.html', **locals())
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<script type="text/javascript">
((cData, data, targetX, targetY, sizeX, sizeY) => {
function pencil(cData, data, targetX, targetY, sizeX, sizeY) {
console.log(cData, data, targetX, targetY, sizeX, sizeY);
}
document.addEventListener('DOMContentLoaded', () => {
pencil(cData, data, targetX, targetY, sizeX, sizeY);
});
})(
{{ c_data | tojson }},
{{ data | tojson }},
{{ targetx | tojson }},
{{ targety | tojson }},
{{ sizex | tojson }},
{{ sizey | tojson }}
);
</script>
</body>
</html>
2) 獲取用jsonify轉換的資料：
另一種可能性是通過 AJAX 從另一個端點獲取資料。資料在服務器端使用jsonify.
from flask import (
Flask,
render_template,
jsonify
)
app = Flask(__name__)
@app.route('/')
def index():
return render_template('index.html')
@app.route('/data')
def data():
c_data = {
"pencil":[
[
{"startx":183,"starty":165,"endx":183,"endy":167,"thick":2,"color":"#000000"},
{"startx":183,"starty":167,"endx":187,"endy":169,"thick":2,"color":"#000000"},
{"startx":187,"starty":169,"endx":188,"endy":171,"thick":2,"color":"#000000"},
{"startx":188,"starty":171,"endx":190,"endy":172,"thick":2,"color":"#000000"},
{"startx":190,"starty":172,"endx":190,"endy":174,"thick":2,"color":"#000000"},
{"startx":190,"starty":174,"endx":191,"endy":174,"thick":2,"color":"#000000"},
{"startx":191,"starty":174,"endx":191,"endy":174,"thick":2,"color":"#000000"}
]
],
"line":[],
"rectangle":[],
"circle":[],
"eraser":[],
"last_action":[0]
}
data = 'data:image/png;base64,iVBORw0KG.......(basically a very long string of base64 encoding)'
targetx = [369]
targety = [252]
sizex = [100]
sizey = [100]
return jsonify(
c_data=c_data,
data=data,
targetx=targetx, targety=targety,
sizex=sizex, sizey=sizey
)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<script type="text/javascript">
(async (uri) => {
function pencil(cData, data, targetX, targetY, sizeX, sizeY) {
console.log(cData, data, targetX, targetY, sizeX, sizeY);
}
const dat = await fetch(uri).then(resp => resp.json());
const { c_data, data, targetx, targety, sizex, sizey } = dat;
pencil(c_data, data, targetx, targety, sizex, sizey);
})({{ url_for('data') | tojson }});
</script>
</body>
</html>
轉載請註明出處，本文鏈接：https://www.uj5u.com/houduan/468889.html
標籤：javascript Python json 解析 神社2