Flask实现UI编辑JSON后/json页面无刷新更新的简易方案咨询

后端修改（Flask部分） #

先把硬编码的静态数据改成全局变量，确保修改后状态能保留，同时新增一个POST接口接收前端的修改请求：

from flask import Flask, render_template, request, jsonify

app = Flask(__name__)

# 全局存储JSON数据，替代原硬编码内容
global_data = {
    "lights": "on",
    "animation": "stack_led",
}

@app.route("/")
def index():
    return render_template('index.html')

@app.route("/json")
def get_json():
    # 返回当前最新的全局数据
    return jsonify(global_data)

@app.route("/update-json", methods=["POST"])
def update_json():
    global global_data
    # 获取前端传来的修改数据
    new_data = request.get_json()
    # 合并更新字段，保留原有未修改的内容
    global_data.update(new_data)
    return jsonify({"status": "success", "data": global_data})

if __name__ == "__main__":
    app.run(debug=True, port=8000, host="0.0.0.0")

前端实现（templates/index.html） #

前端需要完成三个核心功能：展示当前JSON数据、提供编辑表单、定时拉取最新数据实现无刷新同步：

<!DOCTYPE html>
<html>
<head>
    <title>JSON 编辑器</title>
    <style>
        .container {
            max-width: 600px;
            margin: 20px auto;
            padding: 20px;
            font-family: Arial, sans-serif;
        }
        .json-display {
            background: #f5f5f5;
            padding: 15px;
            border-radius: 5px;
            margin-bottom: 20px;
            white-space: pre-wrap;
        }
        .form-group {
            margin-bottom: 15px;
        }
        label {
            display: block;
            margin-bottom: 5px;
            font-weight: bold;
        }
        input, select {
            width: 100%;
            padding: 8px;
            border: 1px solid #ddd;
            border-radius: 4px;
        }
        button {
            background: #007bff;
            color: white;
            border: none;
            padding: 10px 15px;
            border-radius: 4px;
            cursor: pointer;
        }
        button:hover {
            background: #0056b3;
        }
    </style>
</head>
<body>
    <div class="container">
        <h1>JSON 数据编辑器</h1>
        <h2>当前同步数据（与/json页面一致）</h2>
        <div class="json-display" id="jsonDisplay"></div>
        
        <h2>编辑数据</h2>
        <form id="editForm">
            <div class="form-group">
                <label for="lights">灯光状态:</label>
                <select id="lights" name="lights">
                    <option value="on">开启</option>
                    <option value="off">关闭</option>
                </select>
            </div>
            <div class="form-group">
                <label for="animation">动画名称:</label>
                <input type="text" id="animation" name="animation" placeholder="输入动画名称">
            </div>
            <button type="submit">保存修改</button>
        </form>
    </div>

    <script>
        // 拉取最新数据并更新页面显示
        function fetchLatestData() {
            fetch('/json')
                .then(response => response.json())
                .then(data => {
                    document.getElementById('jsonDisplay').textContent = JSON.stringify(data, null, 2);
                    // 同步更新表单值，保持编辑界面与数据一致
                    document.getElementById('lights').value = data.lights;
                    document.getElementById('animation').value = data.animation;
                });
        }

        // 页面加载时初始化数据
        fetchLatestData();
        // 每3秒拉取一次数据，实现无刷新同步
        setInterval(fetchLatestData, 3000);

        // 表单提交处理逻辑
        document.getElementById('editForm').addEventListener('submit', function(e) {
            e.preventDefault();
            const formData = {
                lights: document.getElementById('lights').value,
                animation: document.getElementById('animation').value
            };
            fetch('/update-json', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                },
                body: JSON.stringify(formData)
            })
            .then(response => response.json())
            .then(result => {
                console.log('修改成功:', result);
                // 提交后立即刷新数据，确保页面同步
                fetchLatestData();
            })
            .catch(error => console.error('修改失败:', error));
        });
    </script>
</body>
</html>

方案说明 #

• 后端：用全局变量global_data临时存储数据（如果需要持久化，可改成写入本地JSON文件或小型数据库，适合新手逐步扩展），新增的/update-json接口负责接收前端修改请求并更新数据。
• 前端：
  • 通过定时调用fetch拉取/json接口数据，实现无刷新同步更新页面显示。
  • 表单提交时发送POST请求到后端修改数据，提交后立即刷新数据确保同步。
• 优势：实现逻辑简单，无需复杂的实时通信协议，适合Flask新手快速上手；若需要更高实时性，可后续替换为SSE或WebSocket，当前方案已满足基础需求。

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