web-dev-qa-db-ja.com

json Uncaught SyntaxError:予期しないトークン:

呼び出しを行い、非常に単純な1行のJSONファイルを取得しようとしています。

$(document).ready(function() {

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


  });//end document.ready

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

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

JSONは応答で返されます(赤:#f00)が、Chromeは報告しますncaught SyntaxError:Unexpected token:colors.json:1

URL自体に直接移動すると、JSONが返され、ブラウザーに表示されます。

Colors.jsonの内容をJSLINTに貼り付けると、jsonが検証します。

このエラーを取得できず、成功コールバックに到達できない理由はありますか?

EDIT-上記のjQuery.ajax()呼び出しはjsfiddle.netで完全に実行され、アラート「成功」を期待どおりに返します。

EDIT 2-このURLは正常に動作します 'http://api.wunderground.com/api/8ac447ee36aa2505/geolookup/conditions/q/IA/Cedar_Rapids.json' TYPE:textとして返されることに気付きました/ javascriptおよびChromeは、予期しないトークンをスローしませんでした。他のいくつかのURLをテストしましたが、Unexptected TokenをスローしないURLは、TYPE:text/javascriptとして返されるwundergroundのみです。

Text/plainおよびapplication/jsonとして返されるストリームは、正しく解析されていません。

69
paparush

JQueryに JSONP 応答を期待するように指示したため、jQueryはcallback=jQuery16406345664265099913_1319854793396&_=1319854793399部分をURLに追加しました(これは要求のダンプで確認できます)。

返されるのはJSONPではなくJSONです。あなたの応答は次のようになります

{"red" : "#f00"}

jQueryは次のようなものを期待しています:

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

実際にJSONPを使用して同じOriginポリシーを回避する必要がある場合、colors.jsonを提供するサーバーは実際にJSONP応答を返すことができる必要があります。

同じOriginポリシーがアプリケーションの問題でない場合は、jQuery.ajax呼び出しのdataTypejsonではなくjsonpに修正するだけです。

129
John Flatness

私は自分自身でこれを理解しようとしてここ数日を費やしました。古いjson dataTypeを使用すると、Origin間の問題が発生しますが、dataTypeをjsonpに設定すると、上記で説明したようにデータが「読み取り不可」になります。したがって、明らかに2つの方法があります。最初の方法はうまくいきませんでしたが、潜在的な解決策のようであり、何か間違ったことをしている可能性があります。これは[ https://learn.jquery.com/ajax/working-with-jsonp/ ]で説明されています。

私のために働いたものは次のとおりです:1-[ http://www.ajax-cross-Origin.com/ ]でajax cross Originプラグをダウンロードします。 2-通常のjQueryリンクのすぐ下にスクリプトリンクを追加します。 3-「crossOrigin:true」という行をajax関数に追加します。

行ってもいい!これは私の作業コードです:

  $.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

私は同じ問題を抱えていましたが、解決策はこの関数内にjsonをカプセル化することでした

jsonp(

....あなたのjson ...

2
user1510230

その16進数を引用符で囲み、文字列にする必要がある場合があります。 Javascriptは#文字が気に入らないかもしれません

1
Keith.Abramo