Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Jquery Get json from remote host

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

like image 904
h_h Avatar asked Oct 20 '12 16:10

h_h


2 Answers

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:

  1. Use a server-side proxy to make the request
  2. use JSONP to make the request (See GBD's answer)
  3. Look into CORS
like image 188
Jason Dean Avatar answered Sep 21 '22 20:09

Jason Dean


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/

like image 31
GBD Avatar answered Sep 22 '22 20:09

GBD