如何序列化传递JSON数据并使用Brython解析？Flask代码修复求助

问题根源 #

1. app.py循环逻辑错误：append(n)写在循环外部，导致随机列表仅包含1个元素，无法生成预期的20个随机数
2. JSON传递转义问题：Flask模板默认会转义特殊字符，直接传递JSON字符串会被篡改，Brython无法正确识别
3. Brython解析方式错误：直接将模板字符串赋值给变量，未将JSON格式字符串解析为Python可操作的列表

修复后的代码 #

1. app.py #

from flask import Flask, render_template
from flask_socketio import SocketIO, emit
import random

async_mode = None
app = Flask(__name__)
socketio_obj = SocketIO(app)


@app.route('/', methods=['GET', 'POST'])
def index():
    random_list = []
    # 将append放入循环内部，生成20个随机数
    for i in range(20):
        n = random.randint(-100, 100)
        random_list.append(n)
    # 直接传递列表，后续在模板中用tojson处理为安全JSON
    return render_template('index.html', random_list=random_list)


if __name__ == '__main__':
    socketio_obj.run(app, debug=True)

2. index.html #

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Brython Test</title>
    <script src="../static/brython/Brython-3.11.1/brython.js"></script>
    <script src="../static/brython/Brython-3.11.1/brython_stdlib.js"></script>
    <!-- 用tojson过滤器转成安全JSON，存入全局JS变量供Brython调用 -->
    <script>
        window.randomData = {{ random_list|tojson }};
    </script>
</head>
<body onload="brython()">
    <script type="text/python" src="../static/brython/index.py"></script>
</body>
</html>

3. index.py #

from browser import document, window
import json

# 从全局JS变量获取JSON数据，解析为Python列表
random_list = json.loads(window.randomData)
# 遍历列表，将每个数字输出到页面
for num in random_list:
    document <= f"{num}<br>"

关键修复说明 #

• 循环逻辑修正：将append(n)移入循环内部，确保20个随机数都被添加到列表中
• 安全传递JSON：使用Flask内置的tojson过滤器，避免HTML转义问题，保证JSON格式的正确性
• 正确解析JSON：Brython通过全局JavaScript变量获取数据，再用json.loads解析为Python列表，实现正常的数据渲染

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