Método getJSON() de jQuery ajax

Manual de referencia de jQuery Ajax

Ejemplo

Obtener datos JSON mediante solicitud AJAX y mostrar los resultados:

$("button").click(function(){
  $.getJSON("demo_ajax_json.js",function(result){
    $.each(result, function(i, field){
      $("div").append(field + " ");
    );
  );
);

Pruebe usted mismo

Definición y uso

Cargar datos JSON mediante solicitud GET HTTP.

En jQuery 1.2, puede cargar datos JSON de otros dominios utilizando el formato de callback JSONP, como "myurl?callback=?". jQuery reemplazará automáticamente ? con el nombre correcto de la función para ejecutar la función de callback. Nota: el código que sigue se ejecutará antes de que se ejecute la función de callback.

Sintaxis

jQuery.getJSON(url,data,success(data,status,xhr)})
Parámetros Descripción
url Obligatorio. Define qué URL se enviará la solicitud.
data Opcional. Define los datos que se envían al servidor junto con la solicitud.
success(data,status,xhr)}

Opcional. Especifica la función que se ejecutará cuando la solicitud tenga éxito.

Parámetros adicionales:

  • response - Incluye los datos del resultado de la solicitud
  • status - Incluye el estado de la solicitud
  • xhr - Incluye objeto XMLHttpRequest

Descripción detallada

Esta función es una versión abreviada de la función Ajax, equivalente a:

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

Los datos enviados al servidor se pueden agregar como una cadena de consulta después de la URL. Si data Si el valor del parámetro es un objeto (mapa), se convertirá en una cadena y se codificará en URL antes de agregarlo a la URL.

Pasar a callback Los datos devueltos pueden ser un objeto JavaScript o un array definido en estructura JSON, y se pueden analizar con el método $.parseJSON().

Ejemplo

Cargar datos JSON desde test.js y mostrar un campo de datos name en los datos JSON:

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

Más ejemplos

Ejemplo 1

Cargar 4 imágenes más recientes sobre gatos desde el API JSONP de Flickr:

Código HTML:

<div id="images"></div>

Código de jQuery:


$.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;
  );
);

Ejemplo 2

Cargar datos JSON desde test.js, agregar parámetros, mostrar un campo de datos name en los datos JSON:

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

Manual de referencia de jQuery Ajax