javascript - Passing variables from Flask back to Ajax - Stack Overflow

admin管理员组

文章数量:1343306

When I access my page root, my flask generates a base jinja template which contains elements:

<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>

In this template I have dropdown menus which using Ajax POSTS their values and then I retrieve them from flask to do some calculations.

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

Once I'm done with the calculations, how can I pass the variables back to ajax to update the 3 elements in the base template with the new 'calculated' variables?

In flask:

@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 ??

I have tried to recall the base template with the new values within the ajax called flask function but this doesn't update the html. The values are obtained from ajax into the function just fine but my issues is how to 're-submit' these values into the base template or even, re-render the template from scratch.

Can I call the 'calculation' flask function by a get() in the ajax 'success' like so:

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)){
        }
    }
    });
}

and then replace the element by id with the new variables?

Thanks!

When I access my page root, my flask generates a base jinja template which contains elements:

<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>

In this template I have dropdown menus which using Ajax POSTS their values and then I retrieve them from flask to do some calculations.

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

Once I'm done with the calculations, how can I pass the variables back to ajax to update the 3 elements in the base template with the new 'calculated' variables?

In flask:

@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 ??

I have tried to recall the base template with the new values within the ajax called flask function but this doesn't update the html. The values are obtained from ajax into the function just fine but my issues is how to 're-submit' these values into the base template or even, re-render the template from scratch.

Can I call the 'calculation' flask function by a get() in the ajax 'success' like so:

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)){
        }
    }
    });
}

and then replace the element by id with the new variables?

Thanks!

• javascript
• jquery
• python
• ajax
• flask

Share Improve this question Follow edited Apr 14, 2016 at 11:09 dter asked Apr 14, 2016 at 10:49 dterdter 1,17522 gold badges1111 silver badges2222 bronze badges

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 8

The simplest way would be for your Flask route to return a JSON object, so your ajax function can use this returned data.

Below is a working example illustrating this concept:

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)

templates/index.html

<html>
<body>

Hello world! <br />

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

<br />

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

<script src="https://ajax.googleapis./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>

Try this instead return the response in json format from flask to an ajax get request

本文标签： javascriptPassing variables from Flask back to AjaxStack Overflow