Externally load Json with jquery.getJSON

Question

I don't know if this is a duplicate post or not, sorry if it is. I'm using jquery.getJSON to load a json on my server which works just fine. Although, if I try and load a json file on a different server it doesn't work. I know I don't have any code here (because there's not much point) but I just want to know if I'm using it wrong or if it isn't supposed to load external files. I'm using the iOS Safari browser if that effects anything.

EDIT: I've looked at the console (idk what the error thing really means, it's just red with an x by the url it's trying to get the json from) and it looks like it's not actually receiving the data. Plus, do remember I'm on iOS , not desktop so I couldn't look at the console in the "Develop tab :P

EDIT 2: Great! I think I got it working! http://skitty.xyz/getJSON/

Answer 1

Are you saying you are using jquery ajax request to load some json data from a server?

1. check the "not working server" has the same end point as your server.
2. Check if the url you want to get data from is correct.
3. check if console logged any errors.

Also quote from http://api.jquery.com/jquery.getjson/

"Additional Notes:

Due to browser security restrictions, most "Ajax" requests are subject to the same origin policy; the request can not successfully retrieve data from a different domain, subdomain, port, or protocol. Script and JSONP requests are not subject to the same origin policy restrictions."

Answer 2

You're most likely encountering a path issue; the purpose of $.getJSON is to acquire data via http GET request so yes, it is intended to work remotely. To diagnose your issue, make certain you can access the json file in your browser first: http://domain.com/my_data.json . If that works, use that as the URL you pass into $.getJSON :

$.getJSON( 'http://domain.com/my_data.json', function(data) {
    // do something with your data
});

http://api.jquery.com/jquery.getjson/

Answer 3

jquery.getJSON uses ajax which is all about external resources. Here's a couple things to check for if it's not working on an external resource:

1: Is the path you specified correct? The usage is jquery.getJSON(path, callback). The path should be something you can just drop in your browser and see. If an incorrect path is your problem, you'll see a 404 in the console.

2: Is the resource http and your site https? Non-secure resources on secure pages will get blocked by browser security features. You'd see a error to this effect in the console.

3: Is CORS (Cross-origin resource sharing) enabled for your site on the external resource? Servers will sometimes use a whitelist of IPs and domains to determine what origins are allowed to make requests of it. You'd also see an error to this effect in the console.

There probably some other things to look for but this is where I'd start.

Answer 4

Also, by all means, use the debugging features of Safari to LQQK at the actual HTTP data-streams that are passing back-and-forth in response to what you're doing. (You might need to click on a preference to see the "Develop" menu, which will take you to "Show Web Inspector" and its Network tab.)

This approach will instantly answer many questions that a JavaScript-centered approach will not so-readily tell you. (And of course, you can look at the JavaScript console too ... and at the same time.) "The actual data streams, please." Safari will tell you "exactly what bytes" your app actually sent to the server, and "exactly what bytes" the server sent in return. "Priceless!™"