web-dev-qa-db-ja.com

HTML / Javascript：srcを設定してスクリプトタグに読み込まれたJSONデータにアクセスする方法

ページが表示可能であるため、クライアントでアクセス可能にしたいサーバーに生成したこのJSONファイルがあります。基本的に私が達成したいことは：

私のHTMLドキュメントで次のタグが宣言されています：

<script id="test" type="application/json" src="http://myresources/stuf.json">

ソースで参照されるファイルにはJSONデータが含まれています。私が見たように、データはスクリプトで発生したようにダウンロードされました。

さて、JavaScriptでどのようにアクセスしますか？ jQueryの有無にかかわらず、JSONデータを取得するために多数のメソッドを使用してスクリプトタグにアクセスしようとしましたが、どういうわけかこれは機能しません。 jsonデータがスクリプトにインラインで書き込まれていれば、そのinnerHTMLを取得できたでしょう。それは私が達成しようとしていなかったことであり、そうではありません。

ページをロードした後のリモートJSON要求も、提案したい場合のオプションではありません。

javascripthtmljsonhtml5script-tag
80
ChuckE

そのようなJSONをロードすることはできません、ごめんなさい。

「なぜここでsrcを使用できないのですか？このようなものを見たことがあります...」

<script id="myJson" type="application/json">
 { 
   name: 'Foo' 
 }
</script>

<script type="text/javascript">
    $(function() {
        var x = JSON.parse($('#myJson').html());
        alert(x.name); //Foo
     });
</script>

...簡単に言えば、それはデータタグとして "乱用"されているスクリプトタグにすぎません。あらゆる種類のデータでこれを行うことができます。たとえば、 多くのテンプレートエンジンはスクリプトタグを利用してテンプレートを保持します 。

リモートファイルからJSONをロードするためのオプションの短いリストがあります。

  1. $.get('your.json')またはその他のAJAXメソッドを使用します。
  2. Jsonにグローバル変数を設定するファイルを作成します。 （愚かなようです）。
  3. 非表示のiframeにプルし、ロード後にそのコンテンツをスクレイプします（これを「1997モード」と呼びます）
  4. ブードゥー教の司祭に相談してください。

最終ポイント：

ページをロードした後のリモートJSON要求も、提案したい場合のオプションではありません。

...それは意味がありません。 AJAXリクエストと<script src="">の処理中にブラウザから送信されたリクエストの違いは、本質的には何もありません。どちらもリソースに対してGETを実行します。 HTTPは、スクリプトタグまたはAJAX呼び出しが原因で行われたかどうかを気にしません。サーバーも同様です。

104
Ben Lesh

別の解決策は、サーバー側のスクリプト言語を利用し、json-dataをインラインに含めることです。 PHPを使用する例を次に示します。

<script id="data" type="application/json"><?php include('stuff.json'); ?></script>
<script>
var jsonData = JSON.parse(document.getElementById('data').textContent)
</script>

上記の例では、application/json型の追加のスクリプトタグを使用しています。さらに簡単な解決策は、JSONをJavaScriptに直接含めることです。

<script>var jsonData = <?php include('stuff.json');?>;</script>

追加のタグを使用したソリューションの利点は、JavaScriptコードとJSONデータが互いに分離されていることです。

10
Lea Rosema

これは不可能であるか、少なくともサポートされていないようです。

HTML5仕様 から：

データブロックを含めるために使用する場合（スクリプトではなく）、データはインラインで埋め込む必要があります、データの形式はtype属性を使用して指定する必要があり、src属性は指定しないでください、およびscript要素は、使用する形式に定義された要件に準拠する必要があります。

8
btx9000

現在scriptタグでは不可能ですが、同じドメインからの場合はiframeで可能です。

これを楽しみにして、「可能」であることを示すためにこれを行いましたが、not使用することを推奨します。

<script>
    function someCallback(data){
        /** do something with data */
        console.log(data);

    }
    function jsonOnLoad(callback){
        const raw = this.contentWindow.document.body.textContent.trim();
        try {
          const data = JSON.parse(raw);
          /** do something with data */
          callback(data);
        }catch(e){
          console.warn(e.message);
        }
        this.remove();
    }
</script>
<!-- I frame with src pointing to json file on server, onload we apply "this" to have the iframe context, display none as we don't want to show the iframe -->
<iframe src="your/link/to/some.json" onload="jsonOnLoad.apply(this, someCallback)" style="display: none;"></iframe>

chromeでテストされ、firefoxで動作するはずです。 IEまたはSafariについて不明。

4
kemicofa

別のドメインからJSONをロードする必要がある場合： http://en.wikipedia.org/wiki/JSONP
ただし、潜在的なXSSI攻撃に注意してください。 https://www.scip.ch/en/?labs.20160414

同じドメインの場合は、Ajaxを使用してください。

2
Vitaliy Kaplich

この答えを確認してください： https://stackoverflow.com/a/7346598/1764509

$.getJSON("test.json", function(json) {
    console.log(json); // this will show the info it in firebug console
});
2
L.Grillo

ベンに同意します。単純なJSONファイルをロード/インポートすることはできません。

しかし、絶対にそれを行い、jsonファイルを柔軟に更新したい場合は、次のことができます。

my-json.js

   var myJSON = {
      id: "12ws",
      name: "smith"
    }

index.html

<head>
  <script src="my-json.js"></script>
</head>
<body onload="document.getElementById('json-holder').innerHTML = JSON.stringify(myJSON);">
  <div id="json-holder"></div>
</body>
2
Karan

スクリプトファイルに次のようなものを配置しますjson-content.js

var mainjson = { your json data}

次に、スクリプトタグから呼び出します

<script src="json-content.js"></script>

次のスクリプトで使用できます

<script>
console.log(mainjson)
</script>
0
hossein sedighian

JavaScript内で正確なjsonを使用する別の方法。 Javascript Object Notationなので、json表記でオブジェクトを直接作成できます。これを.jsファイルに保存すると、アプリケーションでオブジェクトを使用できます。これは、アプリ内の他の部分とは別にファイルにキャッシュしたい静的なjsonデータがある場合に便利なオプションでした。

    //Just hard code json directly within JS
    //here I create an object CLC that represents the json!
    $scope.CLC = {
        "ContentLayouts": [
            {
                "ContentLayoutID": 1,
                "ContentLayoutTitle": "Right",
                "ContentLayoutImageUrl": "/Wasabi/Common/gfx/layout/right.png",
                "ContentLayoutIndex": 0,
                "IsDefault": true
            },
            {
                "ContentLayoutID": 2,
                "ContentLayoutTitle": "Bottom",
                "ContentLayoutImageUrl": "/Wasabi/Common/gfx/layout/bottom.png",
                "ContentLayoutIndex": 1,
                "IsDefault": false
            },
            {
                "ContentLayoutID": 3,
                "ContentLayoutTitle": "Top",
                "ContentLayoutImageUrl": "/Wasabi/Common/gfx/layout/top.png",
                "ContentLayoutIndex": 2,
                "IsDefault": false
            }
        ]
    };
0
DominicTurner