如何每 X 小时调用一次 ajax 回调函数 烧瓶

How to call an ajax callback function every X hours Flask

提问人:Aydin Abiar 提问时间:7/26/2022 更新时间:7/26/2022 访问量:84

问:

我正在遵循一个教程,我们使用 Ajax 在我们的 Flask 应用程序中创建回调 本教程将创建一个按钮,每次单击都会调用一个 ajax 回调函数。

我希望有相同的行为,但不是让用户单击按钮,而是希望每 X 小时调用一次函数。

更准确地说:我正在使用 API 绘制多个图形,但我希望这些图形每小时更新一次,而无需用户刷新页面。

下面是示例教程代码:

app.py

from flask import Flask, config, render_template, request
import pandas as pd
import json
import plotly
import plotly.express as px

app = Flask(__name__)

def get_data() :
    # suppose api calls here
    ...
    return df_data #dataframe 

@app.route('/callback', methods=['POST', 'GET'])
def cb():
    return gm()
   
@app.route('/')
def index():
    return render_template('chartsajax.html',  graphJSON=gm())

def gm():

    df_data = get_data()

    fig = px.line(df[df['country']=='France'], x="year", y="gdpPercap")
    
    
    graphJSON = json.dumps(fig, cls=plotly.utils.PlotlyJSONEncoder)
    print(fig.data[0])
    #fig.data[0]['staticPlot']=True
    
    return graphJSON

图表ajax.html

<!doctype html>
<html>
<head>
    <script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script>
        function cb() {
            $.getJSON({
                url: "/callback", success: function (result) {
                    Plotly.newPlot('chart', result, {staticPlot: true});;
                }
            });
        }
    </script>
</head>

<body style="font-family:arial, sans-serif">
    <h1>GDP per Capita Over Time</h1>
    <h2>Choose your country</h2>
    <p>Make sure you spell it correctly with capital letter(s), e.g. United Kingdom</p>
    <input type="submit" id="fname" name="fname" onchange="cb()">
    <div id="chart" class="chart"></div>
</body>

<script>
    d = {{ graphJSON | safe }};
    //d.config={staticPlot: true};
    Plotly.newPlot('chart', d, {});
    
</script>
</html>

我知道如何使用 Dash 来做到这一点,但我想在这个项目中使用 Flask。据我了解,Dash 是 Flask + Plotly,所以我真的不明白为什么它看起来很难做到。

多谢

Ajax Flask 回调 情节

评论


答:

0赞 EricLavault 7/26/2022 #1

你可以使用 setInterval()

该方法在 Window 和 Worker 接口上提供, 重复调用函数或执行代码片段,并带有 每次调用之间的时间延迟。setInterval()

此方法返回一个区间 ID,该 ID 唯一标识 间隔,以便稍后可以通过调用 将其删除。clearInterval()

例如:

const delay = 60*60*1000;
var intervalID = setInterval(cb, delay);