web-dev-qa-db-fra.com

json Uncaught SyntaxError: Jeton inattendu:

Essayez de passer un appel et de récupérer un fichier JSON très simple, sur 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 indique ncaught SyntaxError: jeton inattendu: colors.json: 1

Si j'accède directement à l'URL elle-même, le JSON est renvoyé et affiché dans le navigateur.

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

Des idées pourquoi je ne peux pas obtenir cette erreur et je ne fais jamais au rappel de succès?

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

EDIT 2 - Cette URL fonctionne très bien 'http://api.wunderground.com/api/8ac447ee36aa2505/geolookup/conditions/q/IA/Cedar_Rapids.json' J'ai remarqué qu'elle était retournée sous la forme TYPE: text/javascript et Chrome n'a pas jeté le jeton inattendu. J'ai testé plusieurs autres URL et la SEULE qui ne jette pas le jeton Unxptected est le wunderground renvoyé en tant que TYPE: text/javascript. .

Les flux renvoyés sous la forme text/plain et application/json ne sont pas analysés correctement.

jqueryajaxjsonsyntax-error
69
paparush

Vous avez dit à jQuery de s’attendre à une réponse JSONP , raison pour laquelle jQuery a ajouté la partie callback=jQuery16406345664265099913_1319854793396&_=1319854793399 À l’URL (vous pouvez voir ceci dans votre vidage de la demande).

Ce que vous retournez, c'est JSON, pas JSONP. Votre réponse ressemble à

{"red" : "#f00"}

et jQuery attend quelque chose comme ça:

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

Si vous devez réellement utiliser JSONP pour contourner la même politique d'origine, le serveur servant colors.json Doit pouvoir renvoyer une réponse JSONP.

Si la même stratégie d'origine ne pose pas de problème pour votre application, il vous suffit de corriger le dataType de votre appel jQuery.ajax Pour qu'il soit json au lieu de jsonp.

129
John Flatness

J'ai passé les derniers jours à essayer de comprendre cela moi-même. L'utilisation de l'ancien json dataType vous pose des problèmes croisés liés à l'origine, tandis que définir le type de données sur jsonp rend les données "illisibles" comme expliqué ci-dessus. Donc, il y a apparemment deux issues, la première ne m'a pas fonctionné, mais semble être une solution potentielle et que je pourrais faire 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échargez le plug-in ajax cross Origin dans [ http://www.ajax-cross-Origin.com/ ]. 2- ajoutez un lien de script juste en dessous du lien jQuery normal. 3- Ajoutez la ligne "crossOrigin: true" à votre fonction ajax.

Bon aller! voici mon code de travail pour ceci:

  $.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);
      }
    })
4
S. Rehan

J'ai eu le même problème et la solution était d'encapsuler le JSON à l'intérieur de cette fonction

jsonp (

.... votre json ...

)

2
user1510230

Cet hexagone pourrait avoir besoin d'être entouré de guillemets et transformé en une chaîne. Javascript peut ne pas aimer le caractère #

1
Keith.Abramo