We help IT Professionals succeed at work.

Jquery Json and Ajax

doctor069
doctor069 asked
on
Hi - I am trying to get a singe value from a web service in a json format. My code looks like this

      function accountLookup() {
                $.ajax({
                    type: "GET",
                    url: "http://testserver/customerinformation.asmx/TestJSON",
                    data: " get_param: 'Name' ",
                    contentType: "application/json; charset=utf-8",
                    dataType: "json",
                    success: function (data) {
                       alert('Good:' + data)
                    },
                    error: function (msg) {
                        alert('Error:' + msg)
                    }
                });

            }


And the web service output looks like this (.net)...
-<string>[{"Name":"Ajay Singh","Company":"Birlasoft Ltd.","Address":"LosAngeles California","Phone":"1204675","Country":"US"},{"Name":"Ajay Singh","Company":"Birlasoft Ltd.","Address":"D-195 Sector Noida","Phone":"1204675","Country":"India"}]</string>

Then I run it I get:
Error: [object].[object]

Any suggestions?
Comment
Watch Question

Freelance IT Consultant
Commented:
First, your data needs to be wrapper in {}. And secondly, error event handler should be changed to something like error: function(xhr, textStatus, errorThrown) {...}.

Try this code, and let's us know the exact error you get if it still doesn't work:
                $.ajax({
                     type: "GET",
                     url: "http://testserver/customerinformation.asmx/TestJSON",
                     data: "{ get_param: 'Name' }",
                     contentType: "application/json; charset=utf-8",
                     dataType: "json",
                     success: function (data) {
                        alert('Good:' + data)
                     },
                     error: function (xhr, textStatus, errorThrown) {
                         alert('Message: ' + textStatus + '; Error: ' + errorThrown)
                     }
                });

Open in new window

Author

Commented:
Hi -

This is the data. Do I need to remove the []

[{"Name":"Ajay Singh","Company":"Birlasoft Ltd.","Address":"LosAngeles California","Phone":"1204675","Country":"US"},{"Name":"Ajay Singh","Company":"Birlasoft Ltd.","Address":"D-195 Sector Noida","Phone":"1204675","Country":"India"}]
Duy PhamFreelance IT Consultant

Commented:
No, you shouldn't remove the [], it's indicating a json array. Just parse that data into an array of json objects and work around with them as you want.

See how you parse that data into JSON and work it them here: http://jsfiddle.net/hx8gbfzx/.

Author

Commented:
Hi - Duy

I tried your code and get the error "Message: error; Error"
Duy PhamFreelance IT Consultant

Commented:
Try to use Developer Tools (F12) in Chrome or Internet Explorer to see what is the error. Something like in below screenshot from Chrome (same in Internet Explorer Developer Tools - Console tab):
Sample error

Author

Commented:
I am getting Cross-Origin Request Blocked
Duy PhamFreelance IT Consultant

Commented:
That issue is because you are trying to call web service hosted in different domain than your current domain hosting your web application. See description about CORS here: http://www.w3.org/TR/cors/.

Try to change dataType: "json" to dataType: "jsonp" to see if it could help. If it doesn't you might need to enable CORS on your Web Service.

To enable CORS in your ASMX Web Service, modify your Global.asax.cs as below:
        protected void Application_BeginRequest(object sender, EventArgs e)
        {
            HttpContext.Current.Response.AddHeader("Access-Control-Allow-Origin", "*");
            if (HttpContext.Current.Request.HttpMethod == "OPTIONS")
            {
                HttpContext.Current.Response.AddHeader("Access-Control-Allow-Methods", "GET, POST");

                HttpContext.Current.Response.AddHeader("Access-Control-Allow-Headers", "Access-Control-Allow-Origin, Content-Type, Accept");
                HttpContext.Current.Response.End();
            }
        }

Open in new window


More about enabling CORS can be found here: http://enable-cors.org/.