Passing js object as json to jquery?

Question

I have the following but it's not working, I read somewhere on the stackoverflow that it works like this but I can't seem to get it to work.. it errors... am I doing something wrong?

If I do pass data like this - it works -- so I know my service is working

//THIS WORKS
data: "{one : 'test',two: 'test2' }"


// BUT SETTING UP OBJECT doesn't work..

var saveData = {};
saveData.one = "test";
saveData.two = "tes2";


$.ajax({
    type: "POST",
    url: "MyService.aspx/GetDate",
    data: saveData,
    contentType: "application/json; charset=utf-8",
    dataType: "json",
    success: function(msg) {
        alert(msg.d);
    },
    error: function(msg) {
    alert('error');
    }

});

As noted in Matt Winckler's answer, the problem doesn't lie in jQuery's handling of the object you give it (it does the expected thing) - but apparently .NET services expect the JSON to be a string it can then parse server-side. Including a library for the strict purpose of stringifying the object is waaay unnecessary in this case. — Paolo Bergantino
– Paolo Bergantino, Commented Jun 1, 2009 at 21:22
There's not much harm in including the ~2kb (before gzip) json2.js in your bundle of JavaScript includes. The native browser support coming in browsers like Firefox 3.5 mimics the methods in json2.js too, so using its API is good practice for the future. — Dave Ward
– Dave Ward, Commented Jun 1, 2009 at 21:29
actually Paolo, Matt's answer does not say that. It says that the data is passed as "fname=dave&lname=ward" which is not valid json. The serialize in javascript is not the same as JSON. That is not a problem on the webservice end, but on the javascript side. You have to create json to send it. — Tim Hoolihan
– Tim Hoolihan, Commented Jun 1, 2009 at 21:33
I understand that, but what jQuery does is the expected behavior... — Paolo Bergantino
– Paolo Bergantino, Commented Jun 2, 2009 at 8:43

Tim Hoolihan · Accepted Answer · 2009-06-01 21:06:08Z

30

I believe that code is going to call .value or .toString() on your object and then pass over the wire. You want to pass JSON.

So, include the json javascript library

http://www.json.org/js.html

And then pass...

    var saveData = {};
    saveData.one = "test";
    saveData.two = "tes2";


    $.ajax({
        type: "POST",
        url: "MyService.aspx/GetDate",
        data: JSON.stringify(saveData),      // NOTE CHANGE HERE
        contentType: "application/json; charset=utf-8",
        dataType: "json",
        success: function(msg) {
            alert(msg.d);
        },
        error: function(msg) {
        alert('error');
        }

    });

answered Jun 1, 2009 at 21:06

Tim Hoolihan

12.4k3 gold badges43 silver badges54 bronze badges

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

Comments

Matt Winckler · Accepted Answer · 2009-06-01 21:13:29Z

4

According to this blog post, the reason it doesn't work when you try to pass the object is that jQuery attempts to serialize it. From the post:

Instead of passing that JSON object through to the web service, jQuery will automatically serialize and send it as:
fname=dave&lname=ward
To which, the server will respond with:
Invalid JSON primitive: fname.
This is clearly not what we want to happen. The solution is to make sure that you’re passing jQuery a string for the data parameter[...]

Which is what you're doing in the example that works.

answered Jun 1, 2009 at 21:13

Matt Winckler

2,2432 gold badges23 silver badges27 bronze badges

Comments

Lance McNearney · Accepted Answer · 2009-06-01 22:43:47Z

3

My suggestion would be to use the jquery-json plug-in and then you can just do this in your code:

...
data: $.toJSON(saveData),
...

answered Jun 1, 2009 at 22:43

Lance McNearney

9,5304 gold badges52 silver badges56 bronze badges

Collectives™ on Stack Overflow

Passing js object as json to jquery?

3 Answers 3

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related