Error In Access JSON Response Using Javascript And jOuery

Question

i have a web service which returns a String Of JSON response. When i am trying to access that response in my web page using $.ajax function it always generates an error terminates without any response.. can somebody help me and tell whats wrong in the code below..

function getdata() {

        alert("start");
       $.ajax({
        type: "POST",
        data: "{'value':'10'}",
        url: "http://localhost:8080/RESTExample/parameter_url",
        contentType: "application/json; charset=utf-8",
        dataType: "json",
        success: function (data) {
                    alert("received "+data);
            },
        error: function (data) {
                    alert("error is "+data);
            }
});
        alert("end");
    }

Now I got an URL which provides JSON response on direct access **

"http://coenraets.org/apps/directory/services/getemployees.php"

**

I am trying to access this Data in my JSP page as

    <script language="javascript">

  $(document).ready(function()
   {
   $('#login').click(function(event){

    event.preventDefault();
    localStorage['serviceURL'] = "http://coenraets.org/apps/directory/services/getemployees.php";
    var serviceURL = localStorage['serviceURL'];
      alert("start");

        $.ajax({
    dataType: "jsonp",
    url: serviceURL,
    success :function SucceedFunc(data) {
            alert("success");
            console.log(data);
        },
    error : function(data, textStatus, errorThrown) {
    alert("error");
    console.log(data);
        }
}).done(function ( data ) {
  console.log(data);
});

    });
   });

</script>

<div class="main_div">



<div class="loginform">
<form>   
    <div class="login_btn">
    <input type="submit" class="login" value="Login" id="login"/>
    </div>
</form>
</div>
</div>

which gives an error.... Now Can any one help me in accessing this data.... PLS...

Have you ruled out the possibility that this is simply a [cross-origin issue](https://en.wikipedia.org/wiki/Same_origin_policy)? Are you making your request from a page on the `http://coenraets.org` origin? Does the `getemployees.php` page serve [CORS headers](http://www.html5rocks.com/en/tutorials/cors/) or support [JSONP](https://en.wikipedia.org/wiki/JSONP)? — apsillers, Apr 04 '13 at 13:15

score 2 · Accepted Answer · answered Apr 04 '13 at 13:31

2

$.ajax({
    dataType: "jsonp",
    url: serviceURL
}).done(function ( data ) {
  console.log(data);
});

try this

answered Apr 04 '13 at 13:31

Nisanth Sojan

1,099
8
21

I test it, and it works... Could you explain why setting dataType to "jsonp" make it works? – JoDev Apr 04 '13 at 13:46
@Nisanth Sojan: I used your code to retrieve JSON and its working fine bt with an error in it.. SO can you help me out to clear that error... I am updating my code above after editing... – Maddy Apr 05 '13 at 05:04
1

@Maddy The error comes coz the server returns value in JSON and not JSNOP. See the answer below by Oskar – Nisanth Sojan Apr 05 '13 at 08:41

score 1 · Answer 2 · answered Apr 04 '13 at 14:07

In simple words: Browsers do not allow a JavaScript from a domain (eg. something.com) to access any data from another domain (eg. something-different.com). This is a so calles "Same Origin Policy".

There are certain ways to circumvent this. The easiest way is to use jsonp as mentioned, and I quote from Nisanth Sojan:

$.ajax({
    dataType: "jsonp",
    url: serviceURL
}).done(function ( data ) {
    console.log(data);
});

But jsonp has some other limitations, eg. you cannot do any post requests. The general way to do this is to support CORS on the server the request goes to (as it is the one at risk).

Source & more Info: http://webadvent.org/2011/cross-origin-ajax-with-cors-by-david-walsh

JoDev · Answer 3 · 2013-04-04T13:45:23.697

0

You have to loop for each items like this fiddle

$.ajax({
   dataType:'jsonp',
   url:"http://coenraets.org/apps/directory/services/getemployees.php",
   success : function(data) {
        $(data.items).each(function(index, employee) {
            $('#employees').append($('<div />').text(employee.firstName));
        });
   }
 });

});

edited Apr 04 '13 at 13:45

answered Apr 04 '13 at 13:21

JoDev

6,633
1
22
37

Now it works, but you have to change your json response. Remove the quotes between **items** to have somethink like `{items:...}` – JoDev Apr 04 '13 at 13:46
yours is a get request, but the OP has a POST request – Arun P Johny Apr 04 '13 at 13:47
What does it change? I test with POST request in the fiddle, i've got the same result... – JoDev Apr 04 '13 at 13:49

Error In Access JSON Response Using Javascript And jOuery

3 Answers3