QA@IT
«回答へ戻る

文章の修正

5599
-jsonpのコードとして正しくないため無理です、が、無理に動作させるコードは後述します。
-正確にはjQueryは書式不正とみなすjsonを実行しませんので、そのために実行されません。
+jsonpのコードとして正しくないため無理です、が、jsonp以外の方法でとにかく動作させるサンプルも付けておきます。
+「無理」というのは正確にはjQueryは書式不正とみなすjsonを実行しませんので、そのために実行されません。
 
+そして関数名のところにドットを含む場合は不正とみなされ処理されません。
 `FUNCTION WITH DOT IN JSONPCALLBACK TRIGGERS THE ERROR HANDLER`
 http://bugs.jquery.com/ticket/12707
 
 
-その data.jsonは実際にはサーバー側で動的に生成されるものですか?
+その data.jsonは実際にはサーバー側で動的に生成されるものでしょうか?
 そうでないなら jsonpを使わずとも良いと思います。
 また静的なjsonファイル(関数呼び出しなしの普通のjson)であればgetJSONを使うという手もあります、これについてサンプルが見たければコメントに何か書いてください。
 
+
+*サンプル*
 
 質問としてはどうしてもこの状態のまま実行したいという事でしたので、
 一応サンプルを書いておきますが、特に二番目はevalを不用意に使っていてセキュリティ的にもほめられたやり方ではありませんので可能であれば生成するjsonの方を工夫したほうが良いでしょう。

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>
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
<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
<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>
```

回答を投稿

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>
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
<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
<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>
```