Obtenga un archivo JSON de URL y muestre

Question

El código es muy simple, no sé por qué no funciona.

Este es el enlace al archivo JSON, http://webapp.armadealo.com/home.json

Este es el código usando getJSON

$.getJSON("http://webapp.armadealo.com/home.json", function(data){ 
alert(data); 
}); 

sólo quiero el código para mostrar todo el contenido de JSON.

Answer 1

Después de tantos meses de búsqueda, encontré la solución. Por lo tanto, estoy respondiendo mi propia pregunta.

Cuando JSON no es compatible y cuando estamos atrapados con la Política de Same Origin, tenemos que envolver nuestro JSON con un relleno y convertirlo en un JSONP.

Para ello, tenemos un sitio web http://anyorigin.com/

Puede pegar la URL y obtener el código jQuery que corresponde algo como esto,

$.getJSON('http://anyorigin.com/get?url=http%3A//webapp.armadealo.com/home.json&callback=?', function(data){ 
$('#output').html(data.contents); 
}); 

Si desea utilizar su propio código de salvar la vida, a continuación, sólo tiene que utilizar la dirección URL en el código anterior, que es

http://anyorigin.com/get?url=http%3A//webapp.armadealo.com/home.json&callback=? 

Esta dirección de arriba le dará los mismos datos JSON como JSONP y resuelve todos los problemas.

que había utilizado el siguiente código, que en caso de éxito llama a la función displayAll

$.ajax({ 
     url: 'http://anyorigin.com/get?url=http%3A//webapp.armadealo.com/home.json&callback=?', 
     type: 'GET', 
     dataType: "json", 
     success: displayAll 
    }); 

function displayAll(data){ 
    alert(data); 
} 

Answer 2

Debería funcionar.

1. ¿Has visto la solicitud en firebug u otra consola de depuración, qué sucede y qué respuesta se devuelve?

2. Tenga en cuenta que same-origin-policy, por lo que la secuencia de comandos que hace esta solicitud, también se debe cargar desde webapp.armadealo.com. Si no, necesita una solicitud jsonp. Mira: http://api.jquery.com/jQuery.ajax/

Answer 3

Si nos fijamos en Chrome inspector, es probable que este error:

XMLHttpRequest cannot load http://webapp.armadealo.com/home.json . Origin http://stackoverflow.com is not allowed by Access-Control-Allow-Origin.

Lo que esto significa es que el servidor no quiere que la página Web del cliente leer el archivo. El cliente no es de confianza. Esta es una característica de seguridad básica de XMLHttpRequest para evitar que un sitio como mybank.evil.com descargue datos de mybank.com. Desafortunadamente hace que las pruebas de un archivo local sean desafiantes.

Si confía en cualquier sitio con sus datos o seleccione un número de sitios, puede configurar la secuencia de comandos del servidor para enviar el Access-Control-Allow-Origin para permitir ciertos sitios a través.

Consulte https://developer.mozilla.org/en/http_access_control para obtener más información.

Answer 4

Por lo que pude ver es que su servidor no admite JSONP con sus solicitudes. Por ejemplo

var getUrl = 'http://webapp.armadealo.com/home.json'; 
       $.ajax({ 
        url : getUrl, 
        type : 'GET', 
        dataType : 'jsonp text', 
        jsonp: 'jsonp', 
        crossDomain : true, 
        success: function() { console.log('Success!'); }, 
        error: function() { console.log('Uh Oh!'); }, 
       }); 

Esto diría SyntaxError: invalid label. La devolución tal como la tiene no tiene el formato JSONP correcto. Tiene que estar listo para funcionar como JSONP porque jQuery lo requiere.

Así que lo que está recuperando es correcto, pero no es lo que necesita. Lo que necesita para JSONP llama se vería así:

functionName({ 
    "mall": { 
    "name": "South Shore Plaza", 
    "city": "Braintree", 
    "directory": "/assets/directory/0000/0094/show_floorplan.aspx", 
    "postal_code": "02184", 
    "street": "250 Granite St", 
    "lng": -71.023692, 
    "id": 147, 
    "phone": "(781) 843-8200", 
    "lat": 42.218688, 
    "state": "MA" 
} 
}); 

... ya que lo que vuelve este momento no es válida JavaScript (por sí mismo, y eso es lo que es), y así es como funciona JSONP, la respuesta en realidad necesita ser JavaScript ejecutable.

Puede obtener el mismo error simplemente colocando ese código directamente en su página en un bloque <script>.

Si usted está justo después de la inserción de datos, le recomiendo un complemento como jQuery-oembed, para hacer eso. Si buscas los datos, necesitarás algo en tu servidor para procesar el JSON, luego obtendrás los datos de tu servidor después de eso.

Por ejemplo

así que digamos que nos gustaría hacer una entre dominios utilizando jQuery. Así es como la llamada jQuery $.ajax debe verse como:

$.ajax({ 
    dataType: 'jsonp', 
    data: 'id=test', 
    jsonp: 'jsonp_callback', 
    url: 'http://www.differentdomain.com/get_data.php', 
    success: function() { 
    // do something 
    }, 
}); 

Ahora en el lado del servidor (en el archivo de get_data.php) tenemos que obtener el nombre de devolución de llamada y enviar los datos en formato JSON envueltos en el función de devolución de llamada. Algo como esto:

<?php 
$jsonp_callback = $_GET['jsonp_callback']; 
$data = array('1','2','3'); 
echo $jsonp_callback . '('.json_encode($data).');'; 
?> 

JSONP sólo se puede utilizar siempre y cuando el servidor de integrar adecuadamente la respuesta en una llamada a una función JavaScript.