how can I use data posted from ajax in flask?

Question

I'm having trouble getting data POSTed from jquery ajax.

$('#clickme').click( function() {
    var data = save_input(); // data

    data['_sid'] = $survey_id;  // survey_id injected from flask
    data['_uip'] = $user_ip; // user_ip injected from flask, request.remote_addr

    $.ajax({
        type : "POST",
        url : "{{ url_for('mod.load_ajax') }}",
        data: JSON.stringify(data),
        contentType: 'application/json;charset=UTF-8',
        success: function(result) {
            console.log(result);
        }
    });

    console.log(data);
});

from the code, data is a javascript object like

{
    'foo' : 'foo',
    'bar' : 'bar',
    'fo_' : 42,
}

what I'm trying to do in flask is :

@mod.route('/load_ajax', methods=["GET", "POST"])
def load_ajax():
    if request.method == "POST":
        # load _sid and _uip from posted JSON and save other data
        # but request.form is empty.
        # >>> request.form
        # ImmutableMultiDict([]) 
        return str(request.form)

see, the ajax request is made but no data is submitted. I do console.log(data) with ajax so I can see that I really have some meaningful data in data variable in jquery. but request.form in ajax view is empty. Where is my data submitted?

Change JSON.stringify(data) to data and see what happens. — Blender
– Blender, Commented Feb 16, 2013 at 9:34
@Blender I do recieve the data. How can I receive this in JSON format? — thkang
– thkang, Commented Feb 16, 2013 at 9:38
@thkang use this as Data string: "data=" + JSON.stringify(data);. — 11684
– 11684, Commented Feb 16, 2013 at 9:42

phabtar · Accepted Answer · 2013-06-13 08:20:59Z

75

Try

 $.ajax({
    type : "POST",
    url : "{{ url_for('mod.load_ajax') }}",
    data: JSON.stringify(data, null, '\t'),
    contentType: 'application/json;charset=UTF-8',
    success: function(result) {
        console.log(result);
    }
});

Then from the server, you can refer to the variables in data like this :

request.json['foo']

Since the content type is specified as application/json the data is in request.json

answered Jun 13, 2013 at 8:20

phabtar

1,1591 gold badge11 silver badges16 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Simon Melouah Over a year ago

Was pulling my hair out looking for this, request.json['foo'] did it for me. Thanks :)

akai Over a year ago

charset=UTF-8 was the trick. I was looking for it for hours.

Dan D Over a year ago

yes, Flask request.data is empty when having no contentType in jquery ajax settings

hfz · Accepted Answer · 2016-09-24 09:13:00Z

As per your example you are not sending a key value pair but rather assigning a JSON string to the jQuery data option. As mentioned in the comments you have to stringify your JSON, create an object with a key (which will be used to access the JSON string from flask) and then assign it to the jQuery data key.

    $.ajax({
            type : "POST",
            url : "{{ url_for('mod.load_ajax') }}",
            data: {json_str: JSON.stringify(data)},
            contentType: 'application/json;charset=UTF-8',
            success: function(result) {
                console.log(result);
            }
        });

    @mod.route('/load_ajax', methods=["GET", "POST"])
    def load_ajax():
        if request.method == "POST":
            # load _sid and _uip from posted JSON and save other data
            # but request.form is empty.
            # >>> request.form
            # ImmutableMultiDict([]) 
            return str(request.form['json_str']
     )

Patrick Mutuku · Accepted Answer · 2018-07-04 21:38:56Z

2

On the flask side, use:

data = request.get_json()

The variable data now has the dictionary you sent using ajax and you can now manipulate it with python

answered Jul 4, 2018 at 21:38

Patrick Mutuku

1,19516 silver badges13 bronze badges

1 Comment

Divij Sehgal Over a year ago

Wrote that code after staying up for 24+ hours straight. Missed a few things. I take it back. It works perfectly. My bad.

Granit · Accepted Answer · 2013-02-17 03:12:57Z

1

Have you tried remove contentType? You suppose to post data to Flask.

could you try add fake data like

data:{"hello":"world"} inside ajax? just to check if the hello world arrive to request.form

answered Feb 17, 2013 at 3:12

Granit

3042 silver badges11 bronze badges

Comments

Ayse · Accepted Answer · 2021-07-27 14:31:41Z

0

Get Data From Ajax (Flask)

Html:

<input type="text" id="inputbox" autocomplete="off">

Js:

    $(document).ready(function(){
        $("#inputbox").on("input",function(e){
            inputbox = $("#inputbox").val();
            console.log(inputbox)
            $.ajax({
                method: "post",
                url: "/path",
                data: {inputbox},
                success:function(res){


                }
            })
        });
    });

.py :

search_value = request.form.get("text")

answered Jul 27, 2021 at 14:31

Ayse

1,1609 silver badges16 bronze badges

Collectives™ on Stack Overflow

how can I use data posted from ajax in flask?

5 Answers 5

3 Comments

Comments

1 Comment

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

3 Comments

Comments

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related