Передача двух переменных в javascript с помощью make_response во Flask - PullRequest
Новая
       16

Передача двух переменных в javascript с помощью make_response во Flask

0 голосов
/ 07 сентября 2018

Может кто-нибудь помочь мне понять, как я могу передать две переменные из моих представлений в JavaScript через HTML? Все работает нормально, когда я передаю только динамические (берет из дБ) данные в формате json, но мне также нужно передать еще одно статическое целочисленное значение в файл JS. Когда я меняю вид файла .py: 

response = make_response(render_template('live-data.html', data=json.dumps(data)))

до 

response = make_response(render_template('live-data.html', data=json.dumps(data), bpm=777))

Затем я добавляю {{bpm}} в live-data.html. Наконец в файле JS я меняю входные аргументы функции с 

success: function(point) {

до 

success: function(point, bpm) {

чем материал, который работал до 'перерывов'. : / Как я могу получить как динамический кортеж данных, так и статический целочисленный файл из моих колб .py в JS-файле?

Это то, что у меня есть, и прекрасно работает , прежде чем я внесу изменения, чтобы получить значение "bpm" из .py в файле JS.

.py файл: 

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

@app.route('/live-data')
def live_data():
    # Create an array and echo it as JSON
    cur = mysql.connection.cursor()
    cur.execute('''SELECT time, value FROM data ORDER BY id DESC LIMIT 1''')
    rv = cur.fetchall()
    u_time = time.mktime(rv[0]['time'].timetuple())
    value = rv[0]['value']
    #time in unix form
    data = [u_time * 1000, value]
    response = make_response(render_template('live-data.html', data=json.dumps(data)))
    response.content_type = 'application/json'
    return response

index.html: 

<div class="container-fluid">
  <div class="row">
      <div class="container-fluid" id="data-container"></div>
  </div>
</div>

живой data.html: 

{{ data }}

и в файле JavaScript: 

var chart;
function requestData() {
    $.ajax({
        url: '/live-data',
        success: function(point) {
            var series = chart.series[0],
                shift = series.data.length > 20; // shift if the series is
                                                 // longer than 20

            // add the point
            chart.series[0].addPoint(point, true, shift);

            // title
            // chart.setTitle(null, {text: "Beats per minute - " + bpm});
            // call it again after one second
            setTimeout(requestData, 1000);
        },
        cache: false
    });
}

есть еще js-код, который заполняет «data-container» в index.html, но я думаю, что здесь это неактуально (пожалуйста, дайте мне знать, если бы все это помогло).

Любая помощь очень ценится. Спасибо!

1 Ответ

0 голосов
/ 07 сентября 2018

Таким образом, подход, который вы используете сейчас, довольно утомителен. Вы отправляете AJAX-запрос в колбу, колба затем просматривает некоторые данные, а затем данные отображаются в текстовый файл / HTML-файл, затем запрос настраивается на тип json и только затем возвращается в браузер. .

Flask уже имеет встроенную функциональность для работы с json, поэтому вам не нужно делать все эти шаги.

Ваша функция success в js должна принимать только один аргумент, который вам дал колба ответа. 

var chart;
function requestData() {
    $.ajax({
        url: '/live-data',
        success: function(response) {

            var series = chart.series[0],
                shift = series.data.length > 20; // shift if the series is
                                                 // longer than 20

            // add the point
            chart.series[0].addPoint(response.data, true, shift);

            // title
            // chart.setTitle(null, {text: "Beats per minute - " + response.bpm});
            // call it again after one second
            setTimeout(requestData, 1000);
        },
        cache: false
    });
}

Ответ, который вы делаете, используя колбу, можно сделать с помощью функции jsonify в колбе. Эта функция преобразует словарь в JSON. 

from flask import jsonify

@app.route('/live-data')
def live_data():
    cur = mysql.connection.cursor()
    cur.execute('''SELECT time, value FROM data ORDER BY id DESC LIMIT 1''')
    rv = cur.fetchall()
    u_time = time.mktime(rv[0]['time'].timetuple())
    value = rv[0]['value']
    #time in unix form
    data = [u_time * 1000, value]
    return jsonify({'data': data, 'bpm': 777})
...