How can I interpret JSON returned from jQuery.ajax and using a POST action?

Question

I have the following jQuery code:

$.ajax({
    type: "POST",
    url: "Services/MyService.asmx/Select",
    dataType: "json",
    data: "{'data':'test'}",
    contentType: "application/json; charset=utf-8",
    success: function(msg){ 
                alert(msg); 
             },
    error: function(xhr){ alert(xhr.statusText);}                
});

The call to the method returns the following:

"{"FirstName":"James"}"

When I get the value back, my alert returns the full json string. If I try to do alert(msg.FirstName), I get "undefined".

I have seen a lot of examples using the getJSON() method; however, I haven't seen a way to use that for a POST verb. Can anyone point me in the right direction where I'm going wrong? Based on the jquery documentation, the return value should be the same dataType (json) so I'm not certain what I'm missing.

EDIT: I looked on my service and it is matching examples that I'm finding in terms of the method signature returning a string. I've also confirmed the response type is of application/json.

EDIT2: Updated the response to include the outside quotes. I'm also using a custom JavaScriptConverter to do the JSON serialization. The custom converter just takes my object properties (in this case FirstName) and loads it and it's value into a Dictionary collection which the ASP.Net AJAX Extensions v1.0 can serialize easily.

EDIT3: Looking into the issue that I was having with eval() (it caused an Expected ";" error), I noticed that the json property names were also enclosed in quotes. Once I removed the quotes from the property name (not the value), eval() worked again. Looking into the server side of this issue now.

Answer 1

You can define your post variables with a JSON object as the second parameter.

Example:

$.getJSON("service.py",
    { foo: bar },
    function(data) {
        $.each(data, function() { // blah });
    }
);

---

EDIT: I see what you mean now. Does your service return "something/json" as the MIME type? If you're looking at the response headers in Firebug, it should look something like this:

Content-Type    application/json; charset=utf-8

Answer 2

The jQuery .ajax usage looks solid. How are you verifying the data returned? Firebug? Fiddler? Because .asmx webservices don't return data like {"FirstName":"James"}. Responses look more like:

{"d":{"FirstName":"James"}}

(See http://encosia.com/2008/03/27/using-jquery-to-consume-aspnet-json-web-services/)

For your success callback, try:

function(res) { alert(res.d.FirstName) }

---

Edit: Saw your updates and comment re v1.0 of the ASP.Net AJAX:

I'm not positive how v1.0 works wrt serializing your response, but my guess is if you're doing your own custom JSON serialization in your WebService method, the response may be getting JSON serialized again. So you're serializing twice.

I believe all the components you're using are doing what they're supposed to, it's just now your success callback needs to unserialize manually since you're serializing manually on the server:

function(res) {
    res = eval('(' + res + ')');
    alert(res.FirstName);
}

Answer 3

IIRC you can eval the string, and the result will be the json object.

myJSON = eval(jsonString);

Answer 4

You can't use $getJSON with ASMX services serialized through System.Web.Extensions. You're making the call correctly with $.ajax().

Have you tried using Firebug to set a breakpoint inside the success handler and inspecting the msg value?

Answer 5

try something like this :

 result = eval('(' + result.d + ')');