How to exchange information between javascript and flask?

Question

In my javascript I have some information that I want to send to my flask code and return after some code has run.

In javascript I have the following code:

    request.open('POST', '/update_price');
    const data = new FormData();
    data.append('sort', pizza);
    data.append('toppings', amount)
    request.send(data);

and flask:

@app.route('/update_price', methods=['POST'])
def update_price():

    sort = request.form.get("sort")
    toppings = request.form.get("toppings")

    // run some code

    return sort, toppings

How can I return sort and toppings to javascript? And do I send the data right in the first place?

Try sending it as JSON object instead of `FormData` object. – ngShravil.py Mar 27 '20 at 18:02 — ngShravil.py, Mar 27 '20 at 18:02

Dashzeveg Galbadrakh · Accepted Answer · 2020-03-27T19:07:37.517

0

If the request object wasn't created, it should be created.

JavaScript:

const data = new FormData();
data.append('sort', pizza);
data.append('toppings', amount)

var request = new XMLHttpRequest();
request.onreadystatechange = function() {
    if (this.readyState == 4 && this.status == 200) {
        console.log( this.responseText );
    }
};
request.open('POST', '/update_price');
request.send(data);

If you want to return variables from the server-side (flask), you can return your variables as a formatted string.

return '{} {}'.format(sort, toppings)

edited Mar 27 '20 at 19:07

answered Mar 27 '20 at 18:08

Dashzeveg Galbadrakh

666
1
8
22

Thanks! And how can I use the returned string in javascript? i.e. how can I 'accept' the returned value? – Tijmen Mar 27 '20 at 18:44
@casper I have added the way to use the returned string in the above answer. – Dashzeveg Galbadrakh Mar 27 '20 at 19:09
Thanks man! This is what I was looking for :) – Tijmen Mar 28 '20 at 15:11

score 0 · Answer 2 · answered Mar 27 '20 at 18:19

You don't return variables like that from a route function. Ideally you need to return a render_template() function, and pass the variables along with it, in this case to be rendered in the Javascript portion of the template you specify.

@app.route('/update_price', methods=['POST'])
def update_price():
    sort = request.form.get("sort")
    toppings = request.form.get("toppings")
    // run some code
    return render_template('template.html', sort=sort, toppings=toppings)

and in your template.html file, include the following:

<script type="text/javascript">
var sort= "{{ sort }}";
var toppings= "{{ toppings }}";
// Javascript function referencing the above two variables
</script>

How to exchange information between javascript and flask?

2 Answers2