javascript - Getting an error when trying to load json data from remote location -
i have students.json file on remote server data
{ "studentid":101, "firstname":"carissa", "lastname":"page", "emailid":"laoreet.libero.et@mauris.net" }
now trying read students.json different server (cross-domain) using jquery.ajax().
this 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 code in 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 open web page getting error:
parsererror - error: jquery111006872769086621702_1395648763612 not called".
this same code works fine when both .html , .json file on same server (of course datatype json). error occurs when both files in different server.
i looked through many past questions , articles, non of them helped me solve issue. , suggestions appreciated.
link jsfiddle http://jsfiddle.net/rl5fk/1/
===================================================
update - solved
i wrapped data in students.json callback({...data...}) student.json this
callback({ "studentid":101, "firstname":"carissa", "lastname":"page", "emailid":"laoreet.libero.et@mauris.net" })
in ajax call added addition line jsonpcallback: 'callback'. call 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
it important in network tab of developer tools.
you find this:
hope helps!
Comments
Post a Comment