刷新JavaScript以获取Flask的新值

Question

我需要让下面的 load 函数自动刷新，这样我就不用手动刷新整个页面，还能获取到 my_value 的新值。如果我重新加载页面，图表就会重新开始，这我可不想要。

我以为这个函数每5秒会返回不同的值，但实际上每5秒返回的都是一样的值。

我该怎么让这个脚本每5秒更新一次值呢？

有没有人能告诉我为什么数据没有更新呢？

有没有人能告诉我为什么数据没有更新呢？

$(document).ready(function() {
    Highcharts.setOptions({
        global: {
            useUTC: false
        }
    });
    $(function() {
        var chart;
        $('#my_id').highcharts({
            chart: {
                type: 'spline',
                animation: Highcharts.svg, // don't animate in old IE
                marginRight: 10,
                events: {
                    load: function() {

                        // set up the updating of the chart each second
                        var series = this.series[0];
                        setInterval(function() {
                            var x = (new Date()).getTime();
                            // var y = {{my_value}}; // Math.random() * 100;
                            // series.addPoint([x, y], true, true);

                            $.ajax({
                                type: "GET",
                                url: "/get_data",
                                data: data, // your "template" data goes here
                                success: function(my_value) {
                                    var y = my_value;
                                    series.addPoint([x, y], true, true);
                                }
                            });
                        }, 5000);
                    }
                }
            }
        });
    });

});

这是 Flask 的脚本：

conn = MySQLdb.connect(host=host,
                       user=username,
                       passwd=password,
                       db=database,
                       port=port)


@app.route('/', methods=['GET'])
def index():
    request.args.get('key', '')
    df = sqlio.read_sql(qry1, conn)
    value = df['count'][0]
    return render_template('index.html', my_value=value)

@app.route('/get_data', methods=['GET'])
def get_data():
    df = sqlio.read_sql(qry1, conn)
    value = df['count'][0]
    return value


if __name__ == '__main__':
    app.run(
        port=1114,
        host='0.0.0.0'
    )

Answer 1

你可以通过ajax请求来获取数据：

var x = (new Date()).getTime();
// get data from python script
$.ajax({
  type: "GET",
  url: "/get_data",
  data: data, // your "template" data goes here
  success: function(my_value) {
     var y = my_value;
     series.addPoint([x, y], true, true);
  }
});

然后在你的服务器上，让Flask来处理这些数据：

@app.route('/get_data', methods=['GET'])
def get_data():
    df = sqlio.read_sql(query, conn)
    value = df['my_column'][0]
    return value