Блог

Главная - Вопросы по программированию - Передача данных, запрошенных ajax, в функцию Python

Передача данных, запрошенных ajax, в функцию Python

#javascript #jquery #ajax #flask

Вопрос:

Приложение Flask ниже бесконечно вызывает Ajax для внутренней индексной функции, которая запрашивает базу данных и вводит результат в шаблон.

Я ожидаю, что после завершения Ajax введенные данные будут обновлены, следовательно, обновится сюжет, но это не так.

Как обновить Ajax таким образом, чтобы обновить введенные данные в ‘index.html» (следовательно, обновление графика, который использует эти данные)?

Ценю вашу помощь!

HTML-код:

 <div class="card-body">
    <div  class="chart-area">
       <div id = 'load' class = 'chart' style = 'height:100%'></div> <!--This is where chart appears -->
     </div>
   </div>

Код jQuery:

 <script> 
    $(document).ready(function(){

        function ajaxCall(){

            $.ajax({
                async: false,
                type: 'POST',
                url: '/',
                dataType: 'json',
                contentType: 'application/json;charset=UTF-8',
                success: function (data) {
                  ??? perhaps something here???
                    }
            });

        }

    setInterval(ajaxCall, 2000); // repeatedly calls ajaxCall()

    var graphs = {{graphJSON | safe}}; // saves injected data to variable

    Plotly.plot('load',graphs,{}); // passes saved variable to Python function for plotting which then appears in div with 'load' id above.

    });
</script>

Код колбы:

 from flask import render_template, Blueprint,  
from App.functions.reddit_streamer import AWS_RDB
import json
import plotly
import plotly.express as px



core = Blueprint('core', __name__)



@core.route('/', methods = ['GET', 'POST'])
def index():

    db = AWS_RDB()

    df = db.query_half_hour()

    fig = px.line(df.loc[1:,:], x = 'date' , y = '# of comments')

    graphJSON = json.dumps(fig, cls = plotly.utils.PlotlyJSONEncoder)

    return render_template('index.html', graphJSON = graphJSON)

Ответ №1:

Простой пример запроса и отображения данных для plotly через ajax с периодическими интервалами.

Я создал другой маршрут, который предоставляет данные в формате JSON. Затем я использую API выборки для запроса данных, которые затем используются для обновления графика. Реализация с помощью jQuery также была бы возможна.

 from flask import Flask
from flask import make_response, render_template
import json, random
import pandas as pd
import plotly
import plotly.express as px

app = Flask(__name__)

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

@app.route('/data')
def data():
    df = pd.DataFrame({
        'Year': ['2012', '2014', '2016', '2018', '2020', '2022'],
        'Amount': [random.randint(0, 10) for _ in range(6)],
    })

    fig = px.line(df, x='Year', y='Amount')
    dat = json.dumps(fig, cls=plotly.utils.PlotlyJSONEncoder)

    resp = make_response(dat)
    resp.mimetype = 'application/json'
    return resp
 
 <!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title></title>
  </head>
  <body>
    <div id="chart" class="chart"></div>
    <script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
    <script type="text/javascript">
      (() => {
        const update = () => {
          fetch('/data')
            .then(resp => resp.json())
            .then(data => Plotly.react('chart', data, {}));
        };
        update();
        setInterval(update, 2000);
      })();
    </script>
  </body>
</html>
Метки: , ,