19

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

3 Answers 3

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')
6
  • 2
    Where came from the variable "request"? Nov 30, 2017 at 11:29
  • 4
    @AdailsonDeCastro, you will have to import it from flask from flask import request
    – Sugam
    Nov 30, 2017 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! Jun 7, 2018 at 9:47
  • 5
    For me I must call JSON.stringify() on data in javascript
    – themadmax
    Jun 3, 2019 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, 2020 at 0:07
18

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')
0

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)

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.