QA@IT

jQueryを使用してJSONPのデータが読み込めない

4099 PV

data.jsonのshop.callbackの部分を書き換えずに
jQueryを使用して正しく動作させるには下記のコードを
どのように書き換えればよいのでしょうか?

JavaScript

$.ajax({
    type: 'GET',
    url: 'data.jsonp',
    dataType: 'jsonp',
    jsonp: 'jsoncallback',
    jsonpCallback: 'shop.callback',
    success: function(json){
        $("body").append(json.item);
    },
    error: function(){
        alert("error"); 
    }
});

data.json

shop.callback({
  "item": "pen"
})
  • urlがdata.jsonpになっていますがdata.jsonの間違いですか? -
  • data.jsonの間違いです。 -

回答

data.jsonはサーバー側で動的に生成されるものです。
コールバック関数にドットが入っていると
jQueryは書式不正とみなすのですね。
どうやらjsonpのファイルの方を
変更したほうが良さそうですね。
(現在変更できるか不明・・・)

ご回答いただきありがとうございました。

編集 履歴 (0)

jsonpのコードとして正しくないため無理です、が、jsonp以外の方法でとにかく動作させるサンプルも付けておきます。
「無理」というのは正確にはjQueryは書式不正とみなすjsonを実行しませんので、そのために実行されません。

そして関数名のところにドットを含む場合は不正とみなされ処理されません。
FUNCTION WITH DOT IN JSONPCALLBACK TRIGGERS THE ERROR HANDLER
http://bugs.jquery.com/ticket/12707

その data.jsonは実際にはサーバー側で動的に生成されるものでしょうか?
そうでないなら jsonpを使わずとも良いと思います。
また静的なjsonファイル(関数呼び出しなしの普通のjson)であればgetJSONを使うという手もあります、これについてサンプルが見たければコメントに何か書いてください。

サンプル

質問としてはどうしてもこの状態のまま実行したいという事でしたので、
一応サンプルを書いておきますが、特に二番目はevalを不用意に使っていてセキュリティ的にもほめられたやり方ではありませんので可能であれば生成するjsonの方を工夫したほうが良いでしょう。

  • 一つ目の方法はコールバック関数を持つオブジェクトを先に用意しておいて、data.jsonをスクリプトとして読み込みます(datatypeがscriptならscriptとして実行されます)。
<html lang=ja>
<body>

  <script src="./jquery-1.8.0.min.js"></script>
  <script>
    var url = 'data.json';

    window.onload = function(){ loadAsScript(); }

    var shop = { callback : function(json) { $("body").append(json.item); } };
    function loadAsScript (){

      $.ajax({
          type: 'GET',
          url: url,
          dataType: 'script'
      });
    }
  </script>
</body>
</html>
  • 二つ目はテキストとして読み込み、ajaxのsuccessで自前でパースする形式です。
<html lang=ja>
<body>

  <script src="./jquery-1.8.0.min.js"></script>
  <script>
    var url = 'data.json';

    window.onload = function(){ loadAsText(); }

    function loadAsText (){

      $.ajax({
          type: 'GET',
          url: url,
          dataType: 'text',
          success: function(data){

            $("body").append(
              eval("var shop = { callback: function(json){ return json.item; }}; "
                   + data )
            );

          }
      });
    }
  </script>
</body>
</html>
編集 履歴 (1)
  • ご回答いただきありがとうございました。 -
ウォッチ

この質問への回答やコメントをメールでお知らせします。