Передача переменные из Колбы обратно в Ajax

Когда я получить доступ к моей странице корня, моя колба генерирует шаблон базы дзиндзя, которая содержит элементы:Передача переменные из Колбы обратно в Ajax

<div><span id="var_1">{{ var1|safe }}</span></div> 
<div><span id="var_2">{{ var2|safe }}</span></div> 
<div><span id="var_3">{{ var3|safe }}</span></div>

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

function submitValues(val) { 
    var entry1 = $('#dropdown1').val(); 
    $.ajax({ 
    type: "POST", 
    url: "/getData", 
    data: {entry2_id: val, entry1_id: entry1}, 
    success: function(data){ 
    } 
    }); 
}

После того, как я закончу с расчетами, как я могу передать переменные назад AJAX для обновления 3 элемента в базовом шаблоне с новым «вычисленных» переменных?

В колбу:

@app.route("/getData", methods=['POST']) 
def getData(): 
    entry2Value = request.form['entry2_id'] 
    entry1Value = request.form['entry1_id'] 

    #### DO CALCULATIONS HERE WHICH GENERATES 3 NEW VALUES 
    #### newVal1, newVal2, newVal3 
    #### change var1, var2, var3 from the original template to these new vals 
    return ??

Я попытался вспомнить базовый шаблон с новыми значениями в пределах АЯКС называется функцией опоки, но это не обновляет HTML. Значения получены из ajax в функцию просто отлично, но мои проблемы состоят в том, как «повторно отправить» эти значения в базовый шаблон или даже перерисовать шаблон с нуля.

Могу ли я назвать «вычисление» функции опоки с помощью ГЭТ() в «успехе» Аякса как так:

function submitValues(val) { 
    var entry1 = $('#dropdown1').val(); 
    $.ajax({ 
    type: "POST", 
    url: "/getData", 
    data: {entry2_id: val, entry1_id: entry1}, 
    success: function(data){ 
     $.get("/getData", function(newvar1, newvar2, newvar3)){ 
     } 
    } 
    }); 
}

, а затем заменить элемент по идентификатору с новыми переменными?

Спасибо!

источник

2016-04-14 dter

Самый простой способ для вашего маршрута Flask - вернуть объект JSON, поэтому ваша функция ajax может использовать эти возвращенные данные.

Ниже приведен рабочий пример, иллюстрирующий эту концепцию:

app.py

from flask import Flask, render_template, request, jsonify 

app = Flask(__name__) 

@app.route('/', methods=['GET', 'POST']) 
def app_home(): 
    return render_template("index.html", variable_here = 100) 

@app.route("/getData", methods=['GET']) 
def getData(): 

    entry2Value = request.args.get('entry2_id') 
    entry1Value = request.args.get('entry1_id') 

    var1 = int(entry2Value) + int(entry1Value) 
    var2 = 10 
    var3 = 15 

    return jsonify({ 'var1': var1, 'var2': var2, 'var3': var3 }) 

app.run(debug=True)

шаблоны/index.html

<html> 
<body> 

Hello world! <br /> 

<span id="varID">{{ variable_here }}</span> 

<br /> 

<button id="submit">Submit</button> 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script> 
<script> 


$(document).ready(function() { 

$("#submit").click(function() { 

    var val = 1; 
    var entry1 = 3; 

    $.getJSON({ 
    url: "/getData", 
    data: { entry2_id: val, entry1_id: entry1 }, 
    success: function(data){ 
     $("#varID").html(data.var1); 
    } 
    }); 

}); 

}); 

</script> 

</body> 
</html>

источник

2016-04-14 11:37:23

Спасибо Мэтту! Я получаю TypeError (объект 'dict' не может быть вызван). Нужно ли jsonify данные? И если я использую getJSON вместо ajax, я получаю ошибку 404 [object% 20object] hmm – dter

@dter: Да, используйте 'jsonify()'. См. Документацию Flask о том, как [взаимодействовать с jQuery] (http://flask.pocoo.org/docs/0.10/patterns/jquery/). – mhawke

Если у меня есть ' {{variable_here}}' '$ (" # varID "). Html (data.var1);' сможет изменять содержимое переменной_here на var1, элемент «джиньи»? – dter

Попробуйте это вместо того, чтобы возвращать ответ в Формат json от фляги до запроса ajax

источник

2016-04-14 22:46:25 greywolf

Я пробовал это, но я думаю, что проблема здесь заключалась в том, что шаблон jinja уже был обработан, поэтому я не мог изменить элементы jinja, как я хотел. Закончился отправкой формы и повторной передачи шаблона на submit, который требует, чтобы страница обновлялась, но работала! – dter

Передача переменные из Колбы обратно в Ajax

ответ

Смежные вопросы