Always call JSON.stringify on post data for jQuery Ajax

Question

Or any other function to preprocess your data for that matter :)

Because of my server side framework, I always need to call JSON.stringify before sending my data - unnecessary boilerplate, that you can forget to add.

Right now I have:

$.ajax({
    [...]
    data: JSON.stringify({ someData: self.someData }),
    [...]
});

I would prefer:

$.ajax({
    [...]
    data: { someData: self.someData },
    [...]
});

I've looked into ajaxSetup, but can't find a solution for this, so far...

Update

For a reason why I need this, see the following this question. I could fix this on the serverside, but for now I'm looking for a way to fix this on the clientside.

If the content-type of your request is JSON, you shouldn't need to do this. — gustavohenke
– gustavohenke, Commented Jun 20, 2013 at 14:16
You might be serializing your data at the server unwantedly.. Happened to me sometime back..or you might have to check your responseType..if its got "text" or "html" this might happen — krishwader
– krishwader, Commented Jun 20, 2013 at 14:17
Setting the content type does not transform the data to that type of data. If it's an object, jQuery will still pass it to $.param, thus turning it into serialized data such as somedata=foobar&someotherdata=barfoo — user400654
– user400654, Commented Jun 20, 2013 at 14:24

user400654 · Accepted Answer · 2013-06-20 14:21:47Z

30

No, there is no built-in way to pre-process your data from an object to JSON. However, you can use ajaxSetup and a beforeSend to do it for you.

$.ajaxSetup({
    beforeSend: function(jqXHR,options){
        if ( options.contentType == "application/json" && typeof options.data != "string" ) {
            options.data = JSON.stringify(options.data);
        }
    }
});

Now just make sure to set your contentType to application/json on requests that need to send json to the server so that it will get caught by the if statement.

answered Jun 20, 2013 at 14:21

user400654

95.1k16 gold badges168 silver badges188 bronze badges

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

4 Comments

Dirk Boer Over a year ago

Seems promising - only does jQuery seem to do some serializing stuff before calling beforeSend. Therefore calling some functions() defined on my model someData - I'm using Knockout.js. Is there a way to prevent that?

user400654 Over a year ago

Ah, right, because beforeSend happens AFTER jquery converts the object to string data. beforeSend won't work in this case unless you also use processData: false

Dirk Boer Over a year ago

processData: false works for me, and is an offer I can afford :) Thanks!

user400654 Over a year ago

This would likely be better done as an ajax prefilter.

nathanallen · Accepted Answer · 2016-08-31 16:34:05Z

3

Here an alternative approach that uses a jQuery.prefilter:

$.ajaxPrefilter("json", function(options, originalOptions) {
  options.data = JSON.stringify(originalOptions.data || null);
  options.contentType = "application/json" // content type of *request*
});

$.ajax({
  data: {foo: [1,2,3]},
  dataType: "json" // expected content type of *response* (must match prefilter, above!)
  [...]
});

Because prefilters match on the dataType option, we have to set it manually in our $.ajax request. If the dataType matches the prefilter ("json") then before the request is sent, it will convert the data object to a string, and set the contentType header to match ("application/json").

Keep in mind that this a a global change that will impact ALL future $.ajax requests with dataType: "json"!

edited Aug 31, 2016 at 16:34

answered Aug 26, 2016 at 18:13

nathanallen

4341 gold badge3 silver badges10 bronze badges

1 Comment

Ryan Wheale Over a year ago

Thank you! You can wrap the innards of the prefilter function with if(/POST|PUT|PATCH/.test(options.type)) { ... } to only affect requests with a body.

Chtioui Malek · Accepted Answer · 2017-04-07 10:29:40Z

1

Here's the jQuery.prefilter function i use (it's better than the beforeSend approach), it will match any datatype, and will serialize any object in a post or put request.

$.ajaxPrefilter(function (options, org) {
    var rtype = options.type.toLowerCase();
    if ((rtype === "post" || rtype === "put") && org.data !== null && typeof org.data === 'object') {
        options.data = JSON.stringify(org.data);
    }
});

hope this helps.

answered Apr 7, 2017 at 10:29

Chtioui Malek

11.5k1 gold badge76 silver badges70 bronze badges

Comments

user2505659 · Accepted Answer · 2013-06-20 14:45:53Z

-3

User Jquery.getJSON().You can directly get json data.

$.getJSON('', function(data) {

//you can use data.
});

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

answered Jun 20, 2013 at 14:45

user2505659

71 bronze badge

Collectives™ on Stack Overflow

Always call JSON.stringify on post data for jQuery Ajax

4 Answers 4

4 Comments

1 Comment

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

4 Comments

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related