[解決済み] HTML/Javascript:srcが設定されたscriptタグに読み込まれたJSONデータにアクセスする方法
質問
サーバーで生成した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を読み込むためのオプションの短いリストがあります。
-
使用する
$.get('your.json')
などのAJAXメソッドを使用します。 - jsonにグローバル変数を設定するファイルを書きます。(ホカホカしそう)。
- 見えないiframeに引き込んで、読み込んだ後にその内容をスクレイピングする(私はこれを "1997 モード" と呼んでいる)。
- ブードゥー教の僧侶に相談する。
最後のポイント
ページロード後のリモート JSON リクエストも、一応、オプションではありません。
... それは意味をなさない。AJAXリクエストと、ブラウザがあなたの
<script src="">
を処理している間にブラウザが送るリクエストの違いは、本質的には何もありません。どちらもリソースに対してGETを行うことになります。HTTP は、それが script タグによるものか AJAX 呼び出しによるものかを気にしませんし、サーバーも気にしません。
関連
-
[解決済み] cURLでJSONデータをPOSTするにはどうすればよいですか?
-
[解決済み] JavaScriptで要素のクラスを変更するにはどうすればよいですか?
-
[解決済み] JSONPとは何か、なぜ作られたのか?
-
[解決済み] JavaScriptでカンマを桁区切りにして数値を表示する方法
-
[解決済み] How can I set the default value for an HTML <select> element?
-
[解決済み] オブジェクトをメンバーとして、プレーンなJavaScriptオブジェクトをループさせる方法
-
[解決済み] jQueryでフォームデータをJavaScriptオブジェクトに変換する
-
[解決済み] JavaScriptの正規表現でマッチしたグループにアクセスするにはどうすればよいですか?
-
[解決済み] JSONデータをファイルに書き込むにはどうしたらいいですか?
-
[解決済み] これは純関数ですか?
最新
-
nginxです。[emerg] 0.0.0.0:80 への bind() に失敗しました (98: アドレスは既に使用中です)
-
htmlページでギリシャ文字を使うには
-
ピュアhtml+cssでの要素読み込み効果
-
純粋なhtml + cssで五輪を実現するサンプルコード
-
ナビゲーションバー・ドロップダウンメニューのHTML+CSSサンプルコード
-
タイピング効果を実現するピュアhtml+css
-
htmlの選択ボックスのプレースホルダー作成に関する質問
-
html css3 伸縮しない 画像表示効果
-
トップナビゲーションバーメニュー作成用HTML+CSS
-
html+css 実装 サイバーパンク風ボタン
おすすめ
-
[解決済み】ローカルJSONファイルの読み込み
-
[解決済み] なぜJavaScriptでは!{}[true]がtrueに評価されるのですか?
-
[解決済み] ExtJS 4のイベントハンドリングについて
-
[解決済み] JavaScriptで、ある文字列が別の文字列の中に出現するすべてのインデックスを見つけるにはどうすればよいですか?
-
[解決済み] アサインの左側にJavascriptのオブジェクトブラケット表記({ ナビゲーション } =)があります。
-
[解決済み] moment.jsでミュータビリティを回避するには?
-
[解決済み] $.ajax実行中にローディングイメージを表示する
-
[解決済み] Javascript の parseInt() で先頭のゼロを削除する。
-
[解決済み] JavaScript で css プロパティを使用して HTML 要素の背景色を設定する方法
-
[解決済み] Fetch: ステータスがOKでない場合、プロミスを拒否し、エラーをキャッチするか?