How to GET data in Flask from AJAX post

Question

I want to retrieve the data from the variable 'clicked' so I can use it in SQL queries in Flask.

JQuery

$(document).ready(function(){
  var clicked;
  $(".favorite").click(function(){
    clicked = $(this).attr("name");
    $.ajax({
      type : 'POST',
      url : "{{url_for('test')}}",
      data : clicked
    });
  });
});

Flask/Python

@app.route('/test/', methods=['GET','POST'])
def test():
    return render_template('test.html')

score 26 · Accepted Answer · edited Sep 04 '19 at 06:47

26

You can compose your payload in your ajax request as so:

$(document).ready(function(){
var clicked;
$(".favorite").click(function(){
clicked = $(this).attr("name");
$.ajax({
  type : 'POST',
  url : "{{url_for('test')}}",
  contentType: 'application/json;charset=UTF-8',
  data : {'data':clicked}
});
 });
});

In your flask endpoint, you can extract the value as follows:

@app.route('/test/', methods=['GET','POST'])
def test():
     clicked=None
     if request.method == "POST":
          clicked=request.json['data']
     return render_template('test.html')

edited Sep 04 '19 at 06:47

ZF007

3,708
8
29
48

answered Jun 04 '16 at 15:33

Sugam

617
5
12

2

Where came from the variable "request"? – Adailson De Castro Nov 30 '17 at 11:29
4

@AdailsonDeCastro, you will have to import it from flask ```from flask import request ``` – Sugam Nov 30 '17 at 14:32
8

First complete answer I've seen. I can't believe the flask people don't have a full example with step 1 HTML/select form, step 2 Ajax form, step 3 jinja2 redefinition of variable. Its do frigging powerful but so badly documented. Bye, bye... php! – Eamonn Kenny Jun 07 '18 at 09:47
5

For me I must call ``JSON.stringify()`` on data in javascript – themadmax Jun 03 '19 at 12:43
I had to use `GET`, not `POST` and then it worked just fine for me...upvoted because it was still the most complete answer I found though – jimh Dec 18 '20 at 00:07
What is the point of setting `clicked` here? – jason m Feb 16 '22 at 15:53

score 18 · Answer 2 · answered May 23 '19 at 17:46

I used the best answer but i found a bad request error. I solve this error as below:

1- remove this line from ajax request:

contentType: 'application/json;charset=UTF-8',

2- Access to data by request.form instead of request.json.

The Javascript part will similar to this:

$(document).ready(function(){
var clicked;
$(".favorite").click(function(){
clicked = $(this).attr("name");
$.ajax({
  type : 'POST',
  url : "{{url_for('test')}}",
  data : {'data':clicked}
});
 });
});

Flask part:

@app.route('/test/', methods=['GET','POST'])
def test():
      clicked=None
      if request.method == "POST":
          clicked=request.form['data']
     return render_template('test.html')

score 0 · Answer 3 · answered Jan 29 '17 at 17:32

At your flask app end-point , you can define method to retrieve GET/POST data like this :

from flask_restful import reqparse

def parse_arg_from_requests(arg, **kwargs):
    parse = reqparse.RequestParser()
    parse.add_argument(arg, **kwargs)
    args = parse.parse_args()
    return args[arg]

@app.route('/test/', methods=['GET','POST'])
def test():
      clicked = parse_arg_from_requests('data')
      return render_template('test.html' , clicked=clicked)

How to GET data in Flask from AJAX post

3 Answers3

Linked

Related