Can't get jQuery Ajax to parse JSON webservice result

Question

I have validated the JSON response from my C# Webmethod, so I don't believe that's the problem.

Am trying to parse the result using simple jQuery $.ajax, but for whatever reason I can't get the method to correctly fire and parse the result, also incidentally can't seem to get the function to fire the result. Are their any limits on the size of the JSON object that can be returned.

I also removed this code from inside a "Site.Master" page because it would always refresh when I hit the simple button. Do tags work correctly with jQuery elements like the button input I'm grabbing from the DOM?

function ajax() {
//var myData = { qtype: "ProductName", query: "xbox" };
var myData = { "request": { qtype: "ProductName", query: "xbox"} };
$.ajax({
    type: "POST",
    url: "/webservice/WebService.asmx/updateProductsList",
    data: {InputData:$.toJSON(myData)},
    contentType: "application/json; charset=utf-8",
    dataType: "json",
    success: function (msg) {
        // var msg = {__type: "Testportal.outputData", id: "li1234", message: "it's work!", myInt:101}
        alert("message=" + msg.d.ProductName + ", id=" + msg.d.Brand);
    },
    error: function (res, status) {
        if (status === "error") {
            // errorMessage can be an object with 3 string properties: ExceptionType, Message and StackTrace
            var errorMessage = $.parseJSON(res.responseText);
            alert(errorMessage.Message);
        }
    }
});

}

And the page:

 <asp:Button ID="Button1" runat="server" OnClientClick="ajax();"  Text="Button" />

And the Serverside Webmethod:

 public class WebService : System.Web.Services.WebService
{
    [WebMethod]
    [ScriptMethod(UseHttpGet = true, ResponseFormat = ResponseFormat.Json)]
    public OutputData updateProductsList(InputData request)
    {
        OutputData result = new OutputData();
        var db = new App_Data.eCostDataContext();
        var q = from c in db.eCosts
                select c;

        if (!string.IsNullOrEmpty(request.qtype) && !string.IsNullOrEmpty(request.query))
        {
            q = q.Like(request.qtype, request.query);
        }

        //q = q.Skip((page - 1) * rp).Take(rp);
        result.products = q.ToList();

        searchObject search = new searchObject();

        foreach (App_Data.eCost product in result.products)
        {
            /* create new item list */
            searchResult elements = new searchResult()
            {
                id = product.ProductID,
                elements = GetPropertyList(product)
            };
            search.items.Add(elements);
        }
        return result;

    }

And helper classes:

    public class OutputData
{
    public string id { get; set; }
    public List<App_Data.eCost> products { get; set; }

}
public class InputData
{
    public string qtype { get; set; }
    public string query { get; set; }
}

Just a note: try wrap the qtype and query with single quotes. i.e. "{'qtype': '" + qtype + "', 'query': '" + query + "'}"; — Marko
– Marko, Commented Jul 6, 2010 at 19:52
Thanks! Did this, no new results though -- also updated the $.ajax method. — jordan.baucke
– jordan.baucke, Commented Jul 6, 2010 at 20:34
Usage of single quotes is incorrect for the JSON (see json.org or verify your JSON data in jsonlint.com) — Oleg
– Oleg, Commented Jul 6, 2010 at 23:01

Dave Ward · Accepted Answer · 2010-07-08 01:04:32Z

1

One problem you may be having is that you aren't doing anything to prevent the button from submitting the form and executing a full postback/reload at the same time you're starting your $.ajax() callback.

I'd suggest wiring this up unobtrusively instead of using the OnClientClick property, like this:

$(document).ready(function() {
  // May need to use $('<%= Button1.ClientID %>') if your Button is 
  //  inside a naming container, such as a master page.
  $('#Button1').click(function(evt) {
    // This stops the form submission.
    evt.preventDefault();

    $.ajax({
      // Your $.ajax() code here.
    });
  });
});

I also agree with Oleg that you should use json2.js for your JSON stringifying and parsing. In newer browsers, that will fall back to the browsers' native implementations of those methods, which is much faster and makes the parsing safer.

Update:

To answer your question about the data, no that doesn't look quite right.

What you want to ultimately send to the server is this (sans formatting):

{"request":{"gtype":"ProductName","query":"xbox"}}

To accomplish that, you want something like this:

var req = { request : { qtype: "ProductName", query: "xbox" }};

$.ajax({
  data: JSON.stringify(req),
  // Remaining $.ajax() parameters
});

Keep in mind that request, qtype, and query must match your server-side structure with case-sensitive accuracy.

You can also be more verbose in defining the request object (which I prefer, personally, to keep things clear and readable):

var req = { };

req.request = { };

req.request.qtype = "ProductName";
req.request.query = "xbox";

I've written a bit more about this here, if you're interested: http://encosia.com/2009/04/07/using-complex-types-to-make-calling-services-less-complex/

edited Jul 8, 2010 at 1:04

answered Jul 7, 2010 at 21:46

Dave Ward

60.7k14 gold badges119 silver badges134 bronze badges

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

4 Comments

jordan.baucke Over a year ago

thanks! I also just replaced the JS as a noticed some typos. Does my data look like it's formatted correctly for the web method! And yes, I was wondering about that full post back.

jordan.baucke Over a year ago

thansk Dave- I'm really new to Javascript and haven't used it to do anything as productive as digest a WS before, so this is fun but also a bit tedious! I really appreciate you taking the time

jordan.baucke Over a year ago

Thanks Dave, I actually have Firebug, and had given up using it since I wasn't getting much new information, but I do use the watch and breakpoints. I actually got the original idea to leave my UpdatePanels behind from your website: encosia.com It seems to be working now, I just need to parse the JSON response and place it in HTML so I'm still reading.

Dave Ward Over a year ago

In Firebug, you'll be able to see $.ajax() requests in the console tab. Click the plus-sign icon to expand that open and you'll be able to see what was sent up in the request and what came back down. If the response is JSON, it'll parse that out nicely for you too. That's the part of Firebug that'll help you most right now.

Kris Krause · Accepted Answer · 2010-07-06 19:52:29Z

1

What does your server side code method look like? Set a break point. Is it even being hit?

It should look something like:

[WebMethod, ScriptMethod]
public string updateProductsList(string qtype, string query)
{ // stuff
}

Also, your javascript data params do not look formatted correctly.

answered Jul 6, 2010 at 19:52

Kris Krause

7,3162 gold badges25 silver badges26 bronze badges

1 Comment

jordan.baucke Over a year ago

Thanks, I just added the method to the post. Also, when doing the jS params. I've had success using this format passing a simple string from the input boxes back and forth, so I decided not to change what works! (at least for that). Ill try this new format.

Community · Accepted Answer · 2017-05-23 11:45:58Z

1

It seems to me that your problem is that you try to use manual JSON serialization. There are more direct way. You should just declare [ScriptMethod (ResponseFormat = ResponseFormat.Json)] or [ScriptMethod (UseHttpGet = true, ResponseFormat = ResponseFormat.Json)] and return return direct an object instead of the string from the web method. On the client side (in JavaScript) I strictly recommend you to use JSON.stringify (from json2.js which can be downloaded from http://www.json.org/js.html) for the constructing of the data parameter of jQuery.ajax.

Look at Can I return JSON from an .asmx Web Service if the ContentType is not JSON? and How do I build a JSON object to send to an AJAX WebService? probably also in JQuery ajax call to httpget webmethod (c#) not working you have have an interest for more experiments.

edited May 23, 2017 at 11:45

CommunityBot

11 silver badge

answered Jul 6, 2010 at 22:58

Oleg

222k36 gold badges414 silver badges826 bronze badges

3 Comments

jordan.baucke Over a year ago

Thanks Oleg, I'm going to add the "ScriptMethod" (I had this previously, but was failing to properly set this up as I was using the manual serialization as well) and I like the posts you gave me about converting the service to a "WFC Restful" service is a good idea. Ill answer the question with my results if I have good luck.

Oleg Over a year ago

You welcome! I'd like to hear that my other answers are also helpfull for you. Thanks. Good luck for you also and much success in the software development!

jordan.baucke Over a year ago

Thanks, I made some changes based on my reading, but haven't been able to correctly format my object yet to send to the service -- I'm still playing with it, I see I need to give the input type for the webservice in my JSON string for input -- but I keep getting: Error: Object doesn't support this property or method

Collectives™ on Stack Overflow

Can't get jQuery Ajax to parse JSON webservice result

3 Answers 3

4 Comments

1 Comment

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

4 Comments

1 Comment

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related