jQuery.getJSON()

jQuery.getJSON( url, [ data ], [ callback(data, textStatus) ] ) Returns: XMLHttpRequest

Description: Load JSON-encoded data from the server using a GET HTTP request.

  • version added: 1.0jQuery.getJSON( url, [ data ], [ callback(data, textStatus) ] )

    urlA string containing the URL to which the request is sent.

    dataA map or string that is sent to the server with the request.

    callback(data, textStatus)A callback function that is executed if the request succeeds.

This is a shorthand Ajax function, which is equivalent to:

$.ajax({
  url: url,
  dataType: 'json',
  data: data,
  success: success
});

The callback is passed the returned data, which will be a JavaScript object or array as defined by the JSON structure and parsed using the $.parseJSON() method.

Note: For details on the JSON format, see http://json.org/.

Most implementations will specify a success handler:

$.getJSON('ajax/test.json', function(data) {
  $('.result').html('<p>' + data.foo + '</p>'
    + '<p>' + data.baz[1] + '</p>');
});

This example, of course, relies on the structure of the JSON file:

{
  "foo": "The quick brown fox jumps over the lazy dog.",
  "bar": "ABCDEFG",
  "baz": [52, 97]
}

Using this structure, the example inserts the first string and second number from the file onto the page.

If there is a syntax error in the JSON file, the request will usually fail silently. Avoid frequent hand-editing of JSON data for this reason.

If the specified URL is on a remote server, the request is treated as JSONP instead. See the discussion of the jsonp data type in $.ajax() for more details.

Examples:

Example: Loads the four most recent cat pictures from the Flickr JSONP API.

<!DOCTYPE html>
<html>
<head>
  <style>img{ height: 100px; float: left; }</style>
  <script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
	<div id="images">

</div>
<script>$.getJSON("http://api.flickr.com/services/feeds/photos_public.gne?tags=cat&tagmode=any&format=json&jsoncallback=?",
        function(data){
          $.each(data.items, function(i,item){
            $("<img/>").attr("src", item.media.m).appendTo("#images");
            if ( i == 3 ) return false;
          });
        });</script>
</body>
</html>

Demo:

Example: Load the JSON data from test.js and access a name from the returned JSON data.

$.getJSON("test.js", function(json){
   alert("JSON Data: " + json.users[3].name);
 });

Example: Load the JSON data from test.js, passing along additional data, and access a name from the returned JSON data.

$.getJSON("test.js", { name: "John", time: "2pm" }, function(json){
    alert("JSON Data: " + json.users[3].name);
    });

Example: List the result of a consultation of pages.php in HTML as an array. By Manuel Gonzalez.



var id=$("#id").attr("value");
$.getJSON("pages.php",{id:id},dates);

function dates(datos) {
    
  $("#list").html("Name:"+datos[1].name+"<br>"+"Last Name:"+datos[1].lastname+"<br>"+"Address:"+datos[1].address);
}