通过AJAX/JavaScript调用Flask接口返回多值更新JustGage仪表盘

后端Flask接口修改 #

你之前的返回逻辑有问题，直接返回元组或者错误使用json.dumps都无法正常传递多变量，正确写法如下：

from flask import jsonify, request

@app.route('/nodeDHT')
def getLatestDHT():
    # 接收前端传递的任意参数，没有的话可以设置默认值
    NodeID = request.args.get('NodeID')
    startdatetime = request.args.get('startdatetime', default=None)
    # 注意：如果Pull_CURRENT_DHT_Node_Data不是类实例方法，不需要传self参数
    df = DAO.Pull_CURRENT_DHT_Node_Data(NodeID)
    currentTemp = df.Temperature[0]
    currentHumidity = df.Humidity[0]
    # 封装为字典后用jsonify返回，自动处理响应头格式
    return jsonify({
        "currentTemp": currentTemp,
        "currentHumidity": currentHumidity
    })

传递多参数只需要在后端新增对应request.args.get的取值逻辑即可，前端传参时对应新增键值对就行。

前端JS代码修改 #

首先你之前用的load方法是用来将HTML片段直接插入到指定DOM元素的，不适合接收结构化的温湿度数据，应该用$.get方法请求接口，同时注意AJAX是异步请求，不能直接用同步赋值的方式拿返回值，要在回调函数里处理仪表盘更新逻辑，完整修改后的代码如下：

document.addEventListener("DOMContentLoaded", function (event) {
    // 从页面注入的变量里拿到NodeID，替换成你实际的注入变量名即可
    const NodeID = NODE_EnvCP.NodeID;
    // 初始化仪表盘
    var g1 = new JustGage({
        id: "g1",
        value: 50,
        min: -20,
        max: 150,
        title: "DHT Temp",
        label: "temperature",
        pointer: true,
        textRenderer: function (val) {
            if (val < NODE_EnvCP.low_temp) {
                return 'Cold';
            } else if (val > NODE_EnvCP.hot) {
                return 'Hot';
            } else if (val === NODE_EnvCP.optimum_temp) {
                return 'OK';
            }
        },
    });
    var g2 = new JustGage({
        id: "g2",
        value: 50,
        min: 0,
        max: 100,
        title: "Target",
        label: "Humidity",
        pointer: true,
        textRenderer: function (val) {
            if (val < NODE_EnvCP.low_hum) {
                return 'LOW';
            } else if (val > NODE_EnvCP.high_hum) {
                return 'HIGH';
            } else if (val === NODE_EnvCP.optimum_hum) {
                return 'OK';
            }
        },
    });

    // 封装更新函数
    function updateGages() {
        $.get("/nodeDHT", 
            // 这里传参数对象，jQuery会自动拼接为查询字符串，无需手动处理转义
            {
                NodeID: NodeID
                // 要传更多参数直接在这里加键值对即可，比如 startdatetime: xxx
            },
            function(res) {
                // 后端返回的json数据会被自动解析为对象，直接取属性就行
                g1.refresh(res.currentTemp);
                g2.refresh(res.currentHumidity);
                // 有其他更新逻辑直接在这里加即可，比如更新图表
            }
        );
    }

    // 页面加载完先执行一次更新，避免前2.5秒显示默认值
    updateGages();
    // 每2.5秒更新一次
    setInterval(updateGages, 2500);
});

核心逻辑说明 #

• 传参：前端传递单个/多个参数可以直接在$.get的第二个参数位置传入对象，后端用request.args.get('参数名')即可接收，也支持手动拼接URL参数，效果一致
• 多值返回：后端把需要返回的所有数据封装为字典，用jsonify返回，前端可以直接在AJAX回调中拿到解析好的JS对象，按需调用更新逻辑即可
• 异步处理：不要尝试给AJAX函数写返回值后同步赋值，所有依赖返回数据的操作都要放到AJAX的回调函数中执行

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