Ejemplo de jQuery.getJSON ()

jQuery.getJSON (url [, data ] [, success ] )Devoluciones: jqXHR

Descripción: Cargue datos codificados en JSON desde el servidor mediante una solicitud GET HTTP.

• versión agregada: 1.0jQuery.getJSON (url [, data ] [, success ] )

  • urlTipo: StringA string que contiene la URL a la que se envía la solicitud.
  • datosTipo: PlainObject o String Un objeto plano o string que se envía al servidor con la solicitud.
  • éxitoTipo: Función (datos PlainObject, String textStatus, jqXHR jqXHR) Una función de devolución de llamada que se ejecuta si la solicitud tiene éxito.

Esta es una función Ajax abreviada, que es equivalente a:

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

Los datos que se envían al servidor se agregan a la URL como una consulta string. Si el valor del data parámetro es un objeto simple, se convierte en un string y codificado en URL antes de que se agregue a la URL.

La mayoría de las implementaciones especificarán un controlador de éxito:

$.getJSON("ajax/test.json",function(data)var items =[];
  $.each( data,function(key, val)
    items.push("
"+ val +"
"););$("
","class":"my-new-list",
    html: items.join("")).appendTo("body"););

Este ejemplo, por supuesto, se basa en la estructura del JSON expediente:

"one":"Singular sensation","two":"Beady little eyes","three":"Little birds pitch by my doorstep"

Con esta estructura, el ejemplo recorre los datos solicitados, crea una lista desordenada y la agrega al cuerpo.

los success a la devolución de llamada se le pasan los datos devueltos, que suelen ser un objeto de JavaScript o array según lo definido por la estructura JSON y analizado utilizando el $.parseJSON() método. También se transmite el estado de texto de la respuesta.

A partir de jQuery 1.5, los success La función de devolución de llamada recibe un objeto “jqXHR” (en jQuery 1.4, recibió el XMLHttpRequest objeto). Sin embargo, dado que JSONP y las solicitudes GET entre dominios no utilizan XHR, en esos casos el jqXHR y textStatus los parámetros pasados ​​a la devolución de llamada exitosa no están definidos.

Importante: A partir de jQuery 1.4, si el archivo JSON contiene un error de sintaxis, la solicitud generalmente fallará silenciosamente. Evite la edición manual frecuente de datos JSON por este motivo. JSON es un formato de intercambio de datos con reglas de sintaxis que son más estrictas que las de la notación literal de objetos de JavaScript. Por ejemplo, todas las cadenas representadas en JSON, ya sean propiedades o valores, deben ir entre comillas dobles. Para obtener detalles sobre el formato JSON, consulte https://json.org/.

JSONP

Si la URL incluye el string “devolución de llamada =?” (o similar, según lo definido por la API del lado del servidor), la solicitud se trata como JSONP en su lugar. Vea la discusión de la jsonp tipo de datos en $.ajax() para más detalles.

El objeto jqXHR

A partir de jQuery 1.5, todos los métodos Ajax de jQuery devuelven un superconjunto de XMLHTTPRequest objeto. Este objeto jQuery XHR, o “jqXHR”, devuelto por $.getJSON() implementa la interfaz Promise, dándole todas las propiedades, métodos y comportamiento de una Promise (consulte Objeto diferido para obtener más información). los jqXHR.done() (para el éxito), jqXHR.fail() (por error), y jqXHR.always() (para completar, ya sea exitoso o error; agregado en jQuery 1.6) los métodos toman un argumento de función que se llama cuando termina la solicitud. Para obtener información sobre los argumentos que recibe esta función, consulte la sección Objeto jqXHR del $.ajax() documentación.

La interfaz Promise en jQuery 1.5 también permite los métodos Ajax de jQuery, incluyendo $.getJSON(), para encadenar múltiples .done(), .always(), y .fail() devoluciones de llamada en una sola solicitud, e incluso para asignar estas devoluciones de llamada después de que la solicitud se haya completado. Si la solicitud ya está completa, la devolución de llamada se activa inmediatamente.

// Assign handlers immediately after making the request,// and remember the jqxhr object for this requestvar jqxhr = $.getJSON("example.json",function()
  console.log("success");).done(function()
    console.log("second success");).fail(function()
    console.log("error");).always(function()
    console.log("complete"););// Perform other work here ...// Set another completion function for the request above
jqxhr.always(function()
  console.log("second complete"););

Aviso de baja

los jqXHR.success(), jqXHR.error(), y jqXHR.complete() Los métodos de devolución de llamada son eliminado a partir de jQuery 3.0. Puedes usar jqXHR.done(), jqXHR.fail(), y jqXHR.always() en lugar de.

Notas adicionales:

• Debido a las restricciones de seguridad del navegador, la mayoría de las solicitudes “Ajax” están sujetas a la misma política de origen; la solicitud no puede recuperar datos de un dominio, subdominio, puerto o protocolo diferente.
• Las solicitudes de script y JSONP no están sujetas a las mismas restricciones de política de origen.

doctypehtml><htmllang="en"><head><metacharset="utf-8"><title>jQuery.getJSON demotitle><style>imgheight: 100px;float: left;style><scriptsrc="https://code.jquery.com/jquery-3.5.0.js">script>head><body><divid="images">div><script>(function()var flickerAPI ="https://api.flickr.com/services/feeds/photos_public.gne?jsoncallback=?";
  $.getJSON( flickerAPI,
    tags:"mount rainier",
    tagmode:"any",
    format:"json").done(function(data)
      $.each( data.items,function(i, item)$("





").attr("src", item.media.m ).appendTo("#images");if( i ===3)returnfalse;););)();script>body>html>

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

$.getJSON("test.js", name:"John", time:"2pm").done(function(json)
    console.log("JSON Data: "+ json.users[3].name );).fail(function(jqxhr, textStatus, error)var err = textStatus +", "+ error;
    console.log("Request Failed: "+ err ););