Jquery Get json from remote host

Question

Hi i am trying to read json from a remote host by using this piece of code.

<!DOCTYPE html>
<html>
<head>
<script src="jquery.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
$.getJSON("http://xx.xxx.xxx.xx/rest/user.json",function(result){
  $.each(result, function(i, field){
    $("div").append(field + " ");
      });
    });
  });
});
</script>
</head>
<body>

<button>Get JSON data</button>
<div></div>

</body>
</html>

The problem is when i type the url in browser i get json from it. But failed to get json by using the above jquery method.

Can someone help in this regard. Thanks

Unless the remote host adds the appropriate cross-origin headers, you can't. Are you in control of the remote service? — PhonicUK, Oct 20 '12 at 16:43
The above given json service is Drupal rest service. Can you tell me how should i do cross origin headers. Thankyou. — h_h, Oct 20 '12 at 16:45
i have try the code in IE and i am getting [object Object] [object Object] can any body help me in parsing the json — h_h, Oct 20 '12 at 17:09

Jason Dean · Answer 1 · 2012-10-20T16:57:16.467

6

I am gong to assume this page is not being served from the site that hosts the JSON.

You are attempting to make a cross-domain request, which most(?) browsers to do allow. You are encountering what is called the same-origin policy of the browser. It is a security measure built into the browser. It will not allow you to make an XHR request to a location that is not on the same origin as the requesting page.

There are a few ways around this:

Use a server-side proxy to make the request
use JSONP to make the request (See GBD's answer)
Look into CORS

edited Oct 20 '12 at 16:57

answered Oct 20 '12 at 16:47

Jason Dean

9,585
27
36

Hi i have checked the last link and also verified that my site is already CORS enabled. – h_h Oct 20 '12 at 16:50
Then look at the JS Console, what is it telling you? What browser are you using? – Jason Dean Oct 20 '12 at 16:52
I am using Chrome. Is there any alternate way of doing this any jquery or javascript hack. – h_h Oct 20 '12 at 16:54
@h_a86 u may check your console if its giving cross domain access violation you may try proxy server if you are using php you may try curl for this purpose to fetch the json from cross domain and then pass it to your jquery thanks. – Faisal Naseer Apr 13 '16 at 07:33

score 4 · Accepted Answer · edited Apr 17 '20 at 14:07

4

You have cross-domain issue, so you need to use JSONP so change your jquery method as below

If the URL includes the string "callback=?" (or similar, as defined by the server-side API), the request is treated as JSONP instead.

$.getJSON("http://xx.xxx.xxx.xx/rest/user.json?jsoncallback=?",function(result){
  $.each(result, function(i, field){
    $("div").append(field + " ");
      });
    });

jQuery Manual: http://api.jquery.com/jQuery.getJSON/

edited Apr 17 '20 at 14:07

Parapluie

714
1
7
22

answered Oct 20 '12 at 16:47

GBD

15,847
2
46
50

i have checked this but its not working. My site is CORS enabled. – h_h Oct 20 '12 at 16:59
what are you getting alert(field ) ? – GBD Oct 20 '12 at 17:07

score 0 · Answer 3 · edited May 23 '17 at 12:28

0

Cross domain queries aro not allowed. See ajax jquery: can't get json/xml from other domain for possible workaround. Other way is use proxy on same domain to proxy local queries to remote hosts.

edited May 23 '17 at 12:28

Community

1
1

answered Oct 20 '12 at 16:47

Anton Bessonov

9,208
3
35
38

Jquery Get json from remote host

3 Answers3

Linked