json Erreur de syntaxe non rencontrée : Unxpected token :

Question

J'essaie d'effectuer un appel et de récupérer un fichier JSON très simple, d'une ligne.

$(document).ready(function() {

    jQuery.ajax({ 
        type: 'GET',
        url: 'http://wncrunners.com/admin/colors.json' ,
        dataType: 'jsonp', 
        success: function(data) { 
            alert('success');
        }
    });

  });//end document.ready

Voici la demande RAW :

GET http://wncrunners.com/admin/colors.json?callback=jQuery16406345664265099913_1319854793396&_=1319854793399 HTTP/1.1
Host: wncrunners.com
Connection: keep-alive
Cache-Control: max-age=0
User-Agent: Mozilla/5.0 (Windows NT 6.1) AppleWebKit/535.2 (KHTML, like Gecko) Chrome/15.0.874.106 Safari/535.2
Accept: */*
Referer: http://localhost:8888/jquery/Test.html
Accept-Encoding: gzip,deflate,sdch
Accept-Language: en-US,en;q=0.8
Accept-Charset: ISO-8859-1,utf-8;q=0.7,*;q=0.3

Voici la réponse RAW :

HTTP/1.1 200 OK
Date: Sat, 29 Oct 2011 02:21:24 GMT
Server: Apache/1.3.33 (Unix) mod_ssl/2.8.22 OpenSSL/0.9.7d SE/0.5.3
Last-Modified: Fri, 28 Oct 2011 17:48:47 GMT
ETag: "166a2402-10-4eaaeaff"
Accept-Ranges: bytes
Content-Length: 16
Content-Type: text/plain
Connection: close

{"red" : "#f00"}

Le JSON revient dans la réponse (rouge : #f00), mais Chrome rapporte Erreur de syntaxe involontaire : Unxpected token : colors.json:1

Si je navigue directement vers l'url elle-même, le JSON est renvoyé et s'affiche dans le navigateur.

Si je colle le contenu de colors.json dans JSLINT, le json est validé.

Avez-vous une idée de la raison pour laquelle je n'obtiens pas cette erreur et que je n'arrive jamais au rappel de réussite ?

EDIT - L'appel jQuery.ajax() ci-dessus fonctionne parfaitement sur jsfiddle.net, et renvoie l'alerte 'success' comme prévu.

EDIT 2 - Cette URL fonctionne bien (http://api.wunderground.com/api/8ac447ee36aa2505/geolookup/conditions/q/IA/Cedar\_Rapids.json). J'ai remarqué qu'elle était renvoyée sous la forme TYPE : text/javascript et que Chrome ne générait pas de jeton inattendu. J'ai testé plusieurs autres URL et la SEULE qui n'envoie pas le jeton inattendu est celle de wunderground qui est renvoyée sous la forme TYPE : text/javascript.

Les flux retournés en tant que text/plain et application/json ne sont pas analysés correctement.

Answer 1

Vous avez dit à jQuery de s'attendre à un JSONP c'est pourquoi jQuery a ajouté la fonction callback=jQuery16406345664265099913_1319854793396&_=1319854793399 à l'URL (vous pouvez le voir dans votre vidage de la requête).

Ce que vous renvoyez est JSON, pas JSONP. Votre réponse ressemble à

{"red" : "#f00"}

et jQuery s'attend à quelque chose comme ça :

jQuery16406345664265099913_1319854793396({"red" : "#f00"})

Si vous avez besoin d'utiliser JSONP pour contourner la même politique d'origine, le serveur qui sert le service colors.json doit être en mesure de renvoyer une réponse JSONP.

Si la même politique d'origine n'est pas un problème pour votre application, il vous suffit de corriger l'erreur d'origine. dataType dans votre jQuery.ajax l'appel à être json au lieu de jsonp .

Answer 2

J'ai passé les derniers jours à essayer de résoudre ce problème moi-même. L'utilisation de l'ancien type de données json pose des problèmes d'origine croisée, tandis que la définition du type de données en jsonp rend les données "illisibles", comme expliqué ci-dessus. Il y a donc apparemment deux façons de s'en sortir, la première n'a pas fonctionné pour moi mais semble être une solution potentielle et que je fais peut-être quelque chose de mal. Ceci est expliqué ici [ https://learn.jquery.com/ajax/working-with-jsonp/ ].

Celui qui a fonctionné pour moi est le suivant : 1- télécharger le plug in ajax cross origin [ http://www.ajax-cross-origin.com/ ]. 2- ajoutez-y un lien script juste en dessous du lien normal de jQuery. 3- ajoutez la ligne "crossOrigin : true," à votre fonction ajax.

C'est bon ! Voici mon code de travail pour cela :

  $.ajax({
      crossOrigin: true,
      url : "https://maps.googleapis.com/maps/api/place/nearbysearch/json?location=-33.86,151.195&radius=5000&type=ATM&keyword=ATM&key=MyKey",
      type : "GET",
      success:function(data){
         console.log(data);
      }
    })

Answer 3

J'ai eu le même problème et la solution a été d'encapsuler le json dans cette fonction.

jsonp(

.... votre json ...

)

Answer 4

Cet hexagone devra peut-être être mis entre guillemets et transformé en chaîne de caractères. Javascript n'aime peut-être pas le caractère #.