web-dev-qa-db-fra.com

Obtenez un fichier JSON à partir de l'URL et affichez

Le code est très simple, je ne sais pas pourquoi il fonctionne.

Ceci est le lien vers le fichier JSON, http://webapp.armadealo.com/home.json

Voici le code utilisant getJSON

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

Je veux juste que le code affiche tout le contenu JSON.

javascriptjsonparsingurlgetjson
14
LINGS

Après tant de mois de recherche, j'ai trouvé la solution. Par conséquent, je réponds à ma propre question.

Lorsque JSON n'est pas pris en charge et lorsque nous sommes bloqués avec la même politique d'origine, nous devons envelopper notre JSON avec un remplissage et en faire un JSONP.

Pour ce faire, nous avons un site Web qui sauve des vies http://anyorigin.com/

Vous pouvez coller votre URL et obtenir le code JQuery correspondant quelque chose comme ça,

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

Si vous souhaitez utiliser votre propre code, utilisez simplement l'URL du code ci-dessus, qui est

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

Cette URL ci-dessus vous donnera les mêmes données JSON que JSONP et résout tous les problèmes.

J'avais utilisé le code suivant, qui en cas de succès appelle la fonction 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);
}
6
LINGS

Si vous regardez dans Chrome, vous voyez probablement cette erreur:

XMLHttpRequest ne peut pas se charger http://webapp.armadealo.com/home.json . Origin http://stackoverflow.com n'est pas autorisé par Access-Control-Allow-Origin.

Cela signifie que le serveur ne souhaite pas que la page Web du client lise le fichier. Le client n'est pas fiable. Il s'agit d'une fonction de sécurité de base de XMLHttpRequest afin d'empêcher un site comme mybank.evil.com de télécharger des données depuis mybank.com. Malheureusement, il est difficile de tester à partir d'un fichier local.

Si vous faites confiance à un site avec vos données ou à un certain nombre de sites, vous pouvez configurer votre script de serveur pour envoyer le Access-Control-Allow-Origin pour autoriser le passage de certains sites.

Voir https://developer.mozilla.org/en/http_access_control pour plus de détails.

5
Brian Nickel

D'après ce que je pourrais dire, c'est que votre serveur ne prend pas en charge JSONP avec leurs demandes. Par exemple

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!'); },
                });

Cela dirait SyntaxError: invalid label. Le retour tel que vous l'avez n'est pas correctement formaté JSONP. Il doit être encapsulé pour fonctionner en JSONP car jQuery l'exige.

Donc, ce que vous récupérez est correct, mais ce n'est pas ce dont vous avez besoin. Ce dont vous avez besoin pour les appels JSONP ressemblerait à ceci:

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"
}
});

... puisque ce qui revient actuellement n'est pas du JavaScript valide (en soi, et c'est ce que c'est), et c'est ainsi que JSONP fonctionne, la réponse doit en fait être du JavaScript exécutable.

Vous pouvez obtenir la même erreur en plaçant simplement ce code directement dans votre page dans un <script> bloquer.

Si vous êtes juste après l'incorporation de données, je recommande un plugin comme jQuery-oembed , pour ce faire. Si vous recherchez les données, vous aurez besoin de quelque chose sur votre serveur pour traiter le JSON, puis récupérez les données de votre serveur après cela.

Par exemple

disons que nous aimerions créer un domaine croisé à l'aide de jQuery. Voici comment le jQuery $.ajax l'appel devrait ressembler à:

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

Maintenant, côté serveur (dans le fichier get_data.php ), nous devons obtenir le nom du rappel et envoyer les données au format JSON enveloppées dans la fonction de rappel . Quelque chose comme ça:

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

JSONP ne peut être utilisé que si et lorsque le serveur incorpore correctement la réponse dans un appel de fonction JavaScript.

1
yesh

Ça devrait marcher.

  1. Avez-vous regardé la demande dans Firebug ou une autre console de débogage, que se passe-t-il et que la réponse est retournée?

  2. Veuillez considérer la même politique d'origine , donc le script qui fait cette demande, devrait également être chargé à partir de webapp.armadealo.com. Sinon, vous avez besoin d'une demande jsonp. Regardez: http://api.jquery.com/jQuery.ajax/

1
itinance