106

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

HTMLドキュメントで宣言された次のタグがあります。

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

ソースで参照されているファイルには JSON データが含まれています。これまで見てきたように、スクリプトの場合と同様に、データがダウンロードされています。

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

ページの読み込み後のリモート JSON リクエストもオプションではありません。

4

9 に答える 9

126

そのように 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 呼び出しが原因で行われたかどうかを気にしません。サーバーも同様です。

于 2012-11-27T02:38:54.080 に答える
16

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

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

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

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

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

于 2015-07-14T12:19:50.613 に答える
11

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

HTML5仕様から：

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

于 2016-07-20T15:49:16.553 に答える
4

私はベンに同意します。単純な 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>
于 2019-01-23T23:18:01.233 に答える
2

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

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

于 2014-01-24T18:07:17.010 に答える