2010-04-29 4 views
1

Je tente d'analyser JSON à l'aide de jQuery et je rencontre des problèmes. En utilisant le code ci-dessous, les données revient toujours null:Problème lors de la récupération du résultat JSON avec jQuery dans Firefox et Chrome (IE8 Works)

<!DOCTYPE html> 
<html> 
    <head> 
    <title>JSON Test</title> 
    </head> 
    <body> 
    <div id="msg"></div> 
    <script src="http://code.jquery.com/jquery-latest.js"></script> 
    <script> 
     $.ajax({ 
      url: 'http://datawarehouse.hrsa.gov/ReleaseTest/HGDWDataWebService/HGDWDataService.aspx?service=HC&zip=20002&radius=10&filter=8357&format=JSON', 
      type: 'GET', 
      dataType: 'json', 
      success: function(data) { 
      $('#msg').html(data[0].title); // Always null in Firefox/Chrome. Works in IE8. 
      }, 
      error: function(data) { 
      alert(data); 
      } 
     }); 
    </script> 
    </body> 
</html> 

Les résultats JSON ressemblent à ce qui suit:

{"title":"HEALTHPOINT TYEE CAMPUS","link":"http://www.healthpointchc.org","id":"tag:datawarehouse.hrsa.gov,2010-04-29:/8357","org":"HEALTHPOINT TYEE CAMPUS","address":{"street-address":"4424 S. 188TH St.","locality":"Seatac","region":"Washington","postal-code":"98188-5028"},"tel":"206-444-7746","category":"Service Delivery Site","location":"47.4344818181818 -122.277672727273","update":"2010-04-28T00:00:00-05:00"}

Si je remplace mon URL avec l'URL de l'API Flickr (http://api.flickr.com/services/feeds/photos_public.gne?tags=cat&tagmode=any&format=json&jsoncallback=?), je reçois retour un résultat JSON valide que je suis capable de faire usage de.

J'ai réussi à valider mon JSON au JSONLint, donc je n'ai plus d'idées sur ce que je pourrais faire de mal.

Des pensées?

Mise à jour: J'ai demandé au client de passer le type de contenu à application/json. Malheureusement, je rencontre toujours le même problème. J'ai également mis à jour mon HTML et inclus l'URL en direct avec laquelle j'ai travaillé.

Mise à jour 2: Je viens de faire un essai dans IE8 et cela fonctionne très bien. Pour une raison quelconque, cela ne fonctionne pas dans Firefox 3.6.3 ou Chrome 4.1.249.1064 (45376). J'ai remarqué une erreur avec les données retournées (le développeur retourne une collection de données, même pour les requêtes qui retourneront toujours un seul enregistrement), mais cela me déconcerte encore pourquoi cela ne fonctionne pas dans d'autres navigateurs.

Il peut être important de noter que je travaille à partir d'un fichier HTML sur mon système de fichiers local. Je pensais que cela pourrait être un problème XSS, mais cela n'explique pas pourquoi Flickr fonctionne.

+0

Quel est le code de réponse? Pouvez-vous essayer de passer à un appel '$ .ajax()' et de vérifier les erreurs dans votre appel? – justkt

Répondre

5

L'API Flickr prend en charge JSONP, contrairement à celle à laquelle vous vous connectez. JQuery voit =? et comprend qu'il y a une demande de rappel JSONP et en crée un. Vous pouvez le voir à la ligne 5003 de la bibliothèque jQuery utilisée par votre page exemple.

Donc, vous devez changer deux choses

  1. Ajouter un paramètre de rappel à votre demande. Quoi que vous (ou votre développeur) veuille l'appeler.Supposons que vous choisissiez cb - ajoutez donc ceci à la requête AJAX: &cb=? (de cette façon nous laissons jQuery gérer la création d'un callback pour nous)
  2. Demandez à votre développeur qui a fait le service d'accepter ce nouveau paramètre, et "pad" le résultat avec elle avant de le retourner.
+0

Merci beaucoup pour la réponse. Je n'aurais jamais pensé à ça (je n'ai jamais entendu parler de JSONP avant ça). J'attends un autre développeur pour apporter les modifications au service. Après avoir vérifié que cela fonctionne, je vais accepter cela comme la bonne réponse. – senfo

3

Avez-vous envisagé d'utiliser le format plus flexible $ .ajax? Je voudrais décomposer là-bas et voir si $ .getJSON par défaut ne vous fournit pas exactement ce dont vous avez besoin.

$.ajax({ 
    url: 'results.json', 
    type: 'GET', 
    dataType: 'json', 
    success: function(data, status) 
    { 
     alert(data); 
    } 
}); 

Serait l'implémentation parentale ajax équivalente. Essayez de tourner autour et voir s'il y a une propriété spécifique que vous devez définir.

+0

J'ai pris cette suggestion et mis à jour le code ci-dessus. – senfo

+0

Qu'en est-il de l'ajout d'un gestionnaire pour un cas d'erreur pour voir si c'est ce qui se passe? – justkt

+0

C'est en fait quelque chose dont je n'avais jamais entendu parler auparavant. Je l'ai mis en œuvre de cette façon: http://api.jquery.com/ajaxError/ Est-ce que c'est ce que vous aviez en tête? J'ai mis à jour mon HTML (ci-dessus) pour montrer ma mise en œuvre. – senfo

1

si une url (l'URL de flickr) fonctionne, tandis qu'un autre ne (le vôtre), je dirais que le problème est avec votre URL.

Il semble que vous utilisiez un chemin relatif, est-ce votre intention? avez-vous utilisé panneau net firebug pour voir à quoi ressemble la requête?

+0

Si j'examine l'onglet Réponse du panneau Réseau dans Firebug, je ne vois les données au format JSON que lorsque j'utilise l'URL Flickr. Sinon, le flux de réponse semble être vide. Je ** vois ** voir les résultats attendus si je me connecte au port 80 via telnet et manuellement effectuer un GET. – senfo

3

Est-ce que le contenu est "application/json"?

+0

Très bonne question. Ma conjecture est non (un de mes clients a écrit le service JSON). Je vais devoir regarder ça. – senfo

+0

Je suis presque certain que c'est la réponse. Juste vérifié et c'est Content-Type: application/atom + xml; jeu de caractères = utf-8. – senfo

1

Il s'agit d'un cas d'erreur de requête Crossdomain. Flickr Fonctionne, parce que c'est JSONP, tandis que l'autre URL ne fonctionne pas parce que ce n'est pas JSONP activé. 1. Vérifiez si l'URL prend en charge JsonP 2. Si ce n'est pas le cas, créez un service Web proxy dans votre domaine local (le même domaine que la page Web) 3. Appelez ce service Web proxy qui à son tour appelle l'URL externe du du côté serveur.

Questions connexes