Getting an error when trying to load json data from remote location

Question

I have a students.json file on the remote server with this data

{
"studentId":101,
"firstName":"Carissa",
"lastName":"Page",
"emailId":"[email protected]"
}

Now i am trying to read students.json from different server (cross-domain) using jQuery.ajax().

This is my html page

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Metadata Test Page</title>
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script src="http://code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
</head>
<body>
<div id="studentdisplay">
    <p>Getting Student Details</p>
</div>
</body>
</html>

I have this code in my JavaScript file

$(document).ready(function() {

$.ajax({
      type: 'GET',
      url: 'http://rupeshreddy.com/students.json',
      contentType: "application/json",               
      dataType:"jsonp",
      success: function (data) {

           var output;
           output = '<table><tr><th colspan=2>Student</th></tr>';
           output += '<tr><td>First Name</td><td>'+ data.firstName +'</td></tr>';
           output += '<tr class="alt"><td>Last Name</td><td>'+ data.lastName +'</td></tr>';
           output += '<tr><td>Student Id</td><td>'+ data.studentId +'</td></tr></table>';

          $("#studentdisplay").html( output );         
      }
})

.error(function(jqXHR, textStatus, errorThrown){
        $("#studentdisplay").html(textStatus+" - "+errorThrown);

      });    
});

When i open the web page i getting this error:

parsererror - Error: jQuery111006872769086621702_1395648763612 was not called".

This same code works fine when both .html and .json file are on the same server (of course datatype will be then json). The error occurs only when both files are in different server.

I looked through so many past questions and articles, but non of them helped me solve this issue. Any help and suggestions are appreciated.

Link to JSFIDDLE http://jsfiddle.net/rL5fK/1/

===================================================

Update - Solved

I wrapped my data in students.json like this callback({...data...}) now my student.json was like this

callback({
"studentId":101,
"firstName":"Carissa",
"lastName":"Page",
"emailId":"[email protected]"
})

In my ajax call i added addition line jsonpCallback: 'callback'. Now my call was like this.

$.ajax({
    url: 'http://rupeshreddy.com/students.json',
    dataType: "jsonp",
    jsonpCallback: 'callback',
    success: function(data) {
        console.log(data);


        var output;
           output = '<table border="1"><tr><th colspan=2>Student</th></tr>';
           output += '<tr><td>First Name</td><td>'+ data.firstName +'</td></tr>';
           output += '<tr class="alt"><td>Last Name</td><td>'+ data.lastName +'</td></tr>';
           output += '<tr><td>Student Id</td><td>'+ data.studentId +'</td></tr></table>';

          $("#studentdisplay").html( output );
    }
});

Working JSFIDDLE link http://jsfiddle.net/esWSH/2/

Thanks everyone

@Felix If i use dataType:"json" i am getting this in developer tools Failed to load resource: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'localhost' is therefore not allowed access. — Rup
– Rup, Commented Mar 24, 2014 at 15:53
@dreamweiver Yes error block of ajax call getting triggered, and throws this "error parsererror - Error: jQuery111006872769086621702_1395648763612 was not called" — Rup
– Rup, Commented Mar 24, 2014 at 15:56

Niet the Dark Absol · Accepted Answer · 2014-03-24 08:49:43Z

1

It is important also to look in the Network tab of your Developer Tools.

You would find this:

Network
Network

Hope this helps!

answered Mar 24, 2014 at 8:49

Niet the Dark Absol

326k86 gold badges480 silver badges604 bronze badges

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

6 Comments

Rup Over a year ago

I tried wrapping my json data like this ({...}) and ({...}); in json file, But still got the same error. I am think i am missing some small thing, i not able to figure out what it is. Anyway thanks for suggesting Developer Tools.

Niet the Dark Absol Over a year ago

You need to wrap it in whatever the callback tells you to. Something like this with PHP: <?=$_GET['callback']?>({your json here})

Rup Over a year ago

I am not using PHP to generate my JSON, i have a direct JSON file with data.

Niet the Dark Absol Over a year ago

Then you need to tell jQuery what callback you will be using, and wrap your JSON with that callback.

Rup Over a year ago

I changed my student.json as you suggested, i wrapped my data like this callback({....Data ..}) added this line in ajax call "jsonpCallback: 'callback'", and it worked. part of it was based on stackoverflow.com/questions/8673050/jquery-ajax-calls-failing

|

Bhavik · Accepted Answer · 2014-03-24 10:08:26Z

0

Might be because cross-domain Ajax calls be prohibited on that URL.
Your code is working perfectly. Have a look at the jsfiddle here

HTML

<div id="studentdisplay">
    <p>Getting Student Details</p>
</div>

Javascript

$.ajax({
    //post the request to /echo/json/ and specify the correct datatype
    url: '/echo/json/',
    dataType: 'json',
    data: data,
    success: function (data) {
        //you get back exactly what you sent in the json 
        console.log(data);
        var output;
        output = '<table><tr><th colspan=2>Student</th></tr>';
        output += '<tr><td>First Name</td><td>' + data.firstName + '</td></tr>';
        output += '<tr class="alt"><td>Last Name</td><td>' + data.lastName + '</td></tr>';
        output += '<tr><td>Student Id</td><td>' + data.studentId + '</td></tr></table>';
        $("#studentdisplay").html(output);
    },
    type: 'POST'
});

answered Mar 24, 2014 at 10:08

Bhavik

4,9044 gold badges32 silver badges45 bronze badges

2 Comments

Rup Over a year ago

It seems like this example simulate same domain or same origin. My code works fine in when both files are in same domain, but want it work when they are on different servers (cross domain).

Bhavik Over a year ago

@Rup that's what I meant by cross domain ajax request's might be blocked on that URL. This demo was just to show you that your code's perfect.

Collectives™ on Stack Overflow

Getting an error when trying to load json data from remote location

Update - Solved

2 Answers 2

6 Comments

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

Update - Solved

2 Answers 2

6 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related