1. ホーム
  2. javascript

[解決済み] HTML/Javascript:srcが設定されたscriptタグに読み込まれたJSONデータにアクセスする方法

2022-12-09 21:50:28

質問

サーバーで生成したJSONファイルを、クライアントでページが表示できるようにアクセスできるようにしたいのですが、どうすればよいでしょうか。基本的に、私が達成したいことは次のとおりです。

私は、html文書で次のタグを宣言しています。

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

ソースで参照されているファイルは、JSONデータを持っています。見たところ、スクリプトで起こるのと同じように、データがダウンロードされています。

さて、Javascriptでアクセスするにはどうしたらよいでしょうか。script タグにアクセスし、jQuery を使用したり使用しなかったりして、さまざまな方法で JSON データを取得しようとしましたが、なぜかうまくいきません。その innerHTML の取得は、jsonデータがスクリプトの中にインラインで書かれていればうまくいったはずです。そうではなく、私が達成しようとしていることではありません。

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

どのように解決するのですか?

そのような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>

...まあ、簡単に言うと、scriptタグがデータホルダーとして悪用されただけなんだけどね。このようなことは、あらゆる種類のデータで可能です。たとえば テンプレート・エンジンの多くは、テンプレートを保持するためにスクリプト・タグを利用します。 .

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

  1. 使用する $.get('your.json') などのAJAXメソッドを使用します。
  2. jsonにグローバル変数を設定するファイルを書きます。(ホカホカしそう)。
  3. 見えないiframeに引き込んで、読み込んだ後にその内容をスクレイピングする(私はこれを "1997 モード" と呼んでいる)。
  4. ブードゥー教の僧侶に相談する。

最後のポイント

ページロード後のリモート JSON リクエストも、一応、オプションではありません。

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