41

This one is really weird. I have multiple $.post() in the code, but there is one don't know why sends the json parameters as x-www-form-urlencoded instead and therefore doesn't work.

Here's the code:

$.post("/Route/SaveTransportProperties", { properties: JSON.stringify(propArray), currTravelBox: JSON.stringify(travelBoxObj), accessToken: getAccessToken()}, function(data)
    {
        //DO STUFF
    });

The XHR looks like this in Firefox: Firefox screenshot

Any ideas why is this happening? I also enforced the type as 'json' but doesn't work either.

peterh
  • 11,875
  • 18
  • 85
  • 108
byte_slave
  • 1,368
  • 1
  • 12
  • 24

4 Answers4

44

If you want to send the data as json then use the $.ajax function

You can specify type post and dataType json. 

$.ajax({
  url: "mydomain.com/url",
  type: "POST",
  dataType: "xml/html/script/json", // expected format for response
  contentType: "application/json", // send as JSON
  data: $.param( $("Element or Expression") ),

  complete: function() {
    //called when complete
  },

  success: function() {
    //called when successful
 },

  error: function() {
    //called when there is an error
  },
});

Taken from ajax documentation

http://api.jquery.com/jQuery.ajax/

contentTypeString
Default: 'application/x-www-form-urlencoded; charset=UTF-8'
James Kyburz
  • 13,775
  • 1
  • 32
  • 33
  • Ok. I migth have miscopied the ajax code from somewhere, or perhaps from an old or newer jquery version but problem why ajax as not working ( see my comment under Olli answer ) was bc in the type param i had "JSON" instead of "POST" – byte_slave Apr 03 '11 at 13:42
  • 2
    dataType specifies the expected type of the _response_, not the post data. The answer by Olli is correct - you need to use $.ajax and specify the contentType option. – Chris Leishman Sep 06 '12 at 18:16
  • $.param(obj) could be replaced with JSON.stringify(obj) which performs better. See benchmark here: http://jsperf.com/jquery-param-and-json-stringify – RonyK May 19 '15 at 13:36
9

Because $.post() is for sending form-like requests. $.ajax is for sending whatever you want to. See contentType in $.ajax page for more information.

Quote:

When sending data to the server, use this content-type. Default is "application/x-www-form-urlencoded", which is fine for most cases. If you explicitly pass in a content-type to $.ajax() then it'll always be sent to the server (even if no data is sent). Data will always be transmitted to the server using UTF-8 charset; you must decode this appropriately on the server side.

Olli
  • 1,231
  • 15
  • 31
  • 1
    Post is a shorthand for $.ajax() so it should work and also i've it working in other place inside my code.... its just here that it seems to fail. Reason why i'm not using $.ajax() its because in IE9 compat mode is throwing an exception "SCRIPT87: Invalid argument." but with $.post() ( besides its not working...that shy my question) doesn't throw any error. – byte_slave Apr 03 '11 at 13:37
5

this also works for me

$.ajax({
  url: "mydomain.com/url",
  type: "POST",
  dataType: "xml/html/script/json", // expected format for response
  contentType: "application/json", // send as JSON
  data: JSON.stringify(data),

  complete: function() {
    //called when complete
  },

  success: function() {
    //called when successful
 },

  error: function() {
    //called when there is an error
  },
});
mohammadali ghanbari
  • 241
  • 3
  • 6
2

you can also force your data to be a json in the success function: data = JSON.parse(data);

obotezat
  • 1,041
  • 16
  • 20