Ajax post Json data received in unexpected format in flask

Question

Hello i am trying to send a ajax post request with json data to a flask application. Tried using request.get_json() but it returns a NoneType object but request.form returns dictionary.

my json data is somewhat

var JsonData = {
    dd_token : "abcd" ,
    file_name : "abcd.mp4",
    configuration : [ { video : { aspect_ratio: 4:3, format :mp4 } ,
                        audio : { bitrate: 300 , format : mp3 }
                      },
                      { video : { aspect_ratio: 4:3, format :mp4 } ,
                        audio : { bitrate: 300 , format : mp3 }
                      },
                    ]
    email : 'abc@example.com'
};

This is my ajax post request with Jsondata

$('#submit').click(function(event){
    event.preventDefault();
    JsonData.dd_token = data['dd_token'];
    JsonData.file_name = data['file'];
    JsonData.email = $('input[name="email"]').val();
    JsonData.configuration.push(JsonArr);
    var url= window.location.origin+'/post_job';
    $.ajax({
        url: url, 
        method : "POST" , 
        dataType: 'json',
        data : JsonData ,
        success:function(result){
            $("#div1").html(result);
        }});
});

This is my flask route that receives the json data

@app.route('/post_job',methods=['POST'])
def get_job():
  directory = generate_random()  
  json_put(request.form,os.path.join(directory,'convert_to.json'))
  return "Done"

def json_put(data, filename):
    try:
        jsondata = simplejson.dumps(data, indent=4, skipkeys=True, sort_keys=False)
        fobj = open(filename, 'w')
        fobj.write(jsondata)
        fobj.close()
    except Exception as e:
        print 'ERROR writing', filename
        print e
    return

This is the content of the file after jsondump

{
    "configuration[0][1][audio][audio_ff]": "mp3",
    "configuration[0][1][video][video_ff]": "mp4",
    "configuration[0][0][audio][audio_bps]": "100",
    "configuration[0][1][video][video_bps]": "200",
    "configuration[0][0][video][video_ff]": "mp4",
    "file_name": abcd.mp4",
    "configuration[0][0][audio][audio_ff]": "mp3",
    "configuration[0][1][audio][audio_bps]": "100",
    "configuration[0][0][video][video_bps]": "200",
    "configuration[0][1][video][video_fps]": "24",
    "configuration[0][0][video][res_width]": "320",
    "configuration[0][1][audio][audio_freq]": "30000",
    "configuration[0][0][video][res_height]": "240",
    "configuration[0][1][video][aspect_ratio]": "4:3",
    "configuration[0][1][video][res_width]": "320",
    "configuration[0][0][audio][audio_freq]": "30000",
    "configuration[0][1][video][res_height]": "240",
    "configuration[0][0][video][video_fps]": "24",
    "configuration[0][1][audio][audio_vol]": "0",
    "configuration[0][0][audio][audio_vol]": "0",
    "email": "subho.prp@gmail.com",
    "dd_token": "PJUPK4SDCI8OACWHK3F3",
    "configuration[0][0][video][aspect_ratio]": "4:3"
}

Heres my JsonData building Process

$('#save').click(function(event){
    event.preventDefault();
    JsonArr[box_count]=createBox();

});

function createBox()
{var temp = {};
var collection={};

$.each($('#video :input'),function(index,value){
collection[value.name] = value.value;
//other processing
});
temp['video']=collection;
collection={};
$.each($('#audio :input'),function(index,value){
collection[value.name] = value.value;
//other processing
});
temp['audio']=collection;
collection={};
return temp;
}

You aren't sending json, you're sending form params. If you pass an object to the `data: ` property, jquery will convert it to a paramstring. You should instead pass a json string to it. — Kevin B, Jan 15 '15 at 19:23
Hi @KevinB yes i assumed that because request.form is working. But i am clueless where my Json data is failing. will update with my complete json object building function. — codename_subho, Jan 15 '15 at 19:26
That's half the problem. What you are calling "json" isn't json at all, it's an object. You can however convert the object to json using the `JSON.stringify(theObject)` method. — Kevin B, Jan 15 '15 at 19:33
*"You can however convert the object to json using the `JSON.stringify(theObject)` method."* — Kevin B, Jan 15 '15 at 19:35
@KevinB: any change on the flask side? request.form shouldn't work right? — codename_subho, Jan 15 '15 at 19:41
@KevinB: you can put your answer i will accept it. It solved half of my problems. — codename_subho, Jan 15 '15 at 21:39

score 1 · Accepted Answer · answered Jan 15 '15 at 21:42

1

What you are currently posting is an object, which jquery then converts to a param string. If you wish to post json, put json in the data option and set the contentType appropriately.

...
data: JSON.stringify(theData),
contentType: 'application/json',
...

answered Jan 15 '15 at 21:42

Kevin B

94,570
16
163
180

Actually this link mislead me. it has `dataType:'json'` http://stackoverflow.com/questions/8517071/send-json-data-via-post-ajax-and-receive-json-response-from-controller-mvc – codename_subho Jan 15 '15 at 21:43
the dataType dictates what the server returns, the contentType dictates what you are sending. There are way too many answers/questions/articles that use the $.ajax properties improperly. Note that just setting contentType isn't enough (and isn't always required by the server) – Kevin B Jan 15 '15 at 21:50

Ajax post Json data received in unexpected format in flask

1 Answers1