jQuery sending a JSON with post

Question

I have a flask server that take a JSON formatted as a string and returns it (just for testing purposes) which works when I send the request via curl like this:

curl  -X POST -d data='{"username":"xyz","password":"xyz"}' http://localhost:5000/raw_query

but when I try with this simple jQuery script:

    $.post("http://127.0.0.1:5000/raw_query", '{"username":"xyz","password":"xyz"}', function(data, textStatus) {
        if(textStatus == 'success')
        {
            console.log(data)
        }
        else
        {
            console.log(textStatus)
        }
    });

I get a 400 bad request error:

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2 Final//EN">
<title>400 Bad Request</title>
<h1>Bad Request</h1>
<p>The browser (or proxy) sent a request that this server could not understand.</p>

to add more detail: this is the flask code that executes the request:

@app.route('/raw_query', methods = ['POST'])
   def raw_query():
     data = json.loads(request.form['data'])
     return jsonify(data)

I really can't think of a possible reason for it, but then again I'm quite a rookie with jQuery so probably I'm missing something... any help would be much appreciated

score 1 · Accepted Answer · 2016-06-14 21:20:31Z

1

Try alter a bit your code as in the below example (have not tested this). Format your data (A plain object or string that is sent to the server with the request) like:

 $.post("http://localhost:5000/raw_query", {data:JSON.stringify({username:"xyz",password:"xyz"})}, function(data, textStatus) {
        if(textStatus == 'success')
        {
            console.log(data)
        }
        else
        {
            console.log(textStatus)
        }
    });

edited Jun 14, 2016 at 21:20

answered Jun 14, 2016 at 21:12

user2560539

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

1 Comment

user2560539 Over a year ago

@Barmar yes you are right, it has to be sent as json.

Barmar · Accepted Answer · 2016-06-14 21:21:36Z

0

The problem is that you're not sending the parameter name data. You're just sending the JSON string as the raw parameter, not the value of the data POST parameter.

$.post("http://127.0.0.1:5000/raw_query", {
    data: '{"username":"xyz","password":"xyz"}'
}, function(data, textStatus) {
if(textStatus == 'success')
    {
        console.log(data)
    }
    else
    {
        console.log(textStatus)
    }
});

edited Jun 14, 2016 at 21:21

user2560539

answered Jun 14, 2016 at 20:51

Barmar

789k57 gold badges555 silver badges669 bronze badges

5 Comments

darkpirate Over a year ago

i used json stringify, i wrote this way in the example just to make clear that the string is formatted in the same way. btw, same problem, 400 error is persistent.

Barmar Over a year ago

I forgot type: "POST", try it now.

Barmar Over a year ago

Never mind, I didn't see the data= in the original curl command.

darkpirate Over a year ago

that actually work! would you care to explain why it works this way? on the jquery site non of the examples used a data formatted this way. looks like it has to take a key value pair ?

Barmar Over a year ago

It is a key-value pair. The key is data, the value is the JSON string, just like in your curl command. You could also write 'data={"username":"xyz","password":"xyz"}'

Collectives™ on Stack Overflow

jQuery sending a JSON with post

2 Answers 2

1 Comment

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related