22

JSONをHTMLに埋め込みたい。私が見つけた最も洗練された解決策は、script-tag と mime メディア タイプを利用するものapplication/jsonです。

<script id="data" type="application/json">
    {
        "foo" : "bar"
    }
</script>

これは JSON を埋め込む標準的な方法ですか? そうでない場合、上記のソリューションにリスクはありますか?

(JSON-P サービスの代わりに) インライン JSON を使用する理由:

  • 少量の JSON データ
  • HTTP リクエストが少ない
  • HTML 属性のデータに対するインライン JSON の設定

[更新] json を埋め込む理由。

トラフィックが非常に多い Web サイトのギャラリー ウィジェットがあります。ギャラリーは 100 枚以上の画像で構成できます。一度に 1 つの画像のみを表示しており、残りの画像は遅延読み込みされます。ただし、すべての画像の情報 (画像 src) は、ページの読み込み時に html にレンダリングされます。html で画像情報をレンダリングするには、さまざまな方法があります。JSON を使用する代わりに、以下に示すように html データ属性を使用することもできます。

<li class="image" data-src="image-path.jpg">
    <!-- image tag will be created here using javascript -->
</li>

結果は次のとおりです。

<li class="image image-loaded" data-src="image-path.jpg">
    <img src="image-path.jpg" />
</li>

上記のソリューションの欠点は、余分なマークアップです。むしろ、JSON とdoT.jsなどの Javascript-Templating エンジンを使用したいと思います。

4

4 に答える 4

8

あなたが提案することは絶対に正しいです。タグのtype属性はscript、有効な MIME 記述子である必要があります。公式の JSON RFCセクション 6「IANA に関する考慮事項」によると、次のようになります。

JSON テキストの MIME メディア タイプは application/json です。
タイプ名: アプリケーション
サブタイプ名: json

したがって、HTML は有効です。

<script id="data" type="application/json">
    {
        "foo" : "bar"
    }
</script>

いいえ、これを行うことに伴う追加のリスクはありません。

于 2014-01-09T14:15:54.813 に答える
5

解決策を見つけなければならなかったので、私は自分の質問に答えています。私のソリューションは、 Bergiがインライン JSONP を使用して提案したことに基づいています。手動で JSON を解析する必要がないため、実際の質問に対する回答を見つけるよりも優れたソリューションです。

JSON データ (および HTML) は Java Server Pages (JSP) で生成されます。

ステップ1

カスタム変数名は、JSP を使用して作成されます。これは、json データが割り当てられる JavaScript グローバル変数として使用されます。名前は、同じページでの名前の競合を防ぐためにランダムに生成されます。

<c:set var="jsonpVarName">jsnpData<%= java.lang.Math.round(java.lang.Math.random() * 1000000) %></c:set>

ステップ 2 スクリプト タグには、それを識別するための cssClassname とdata-var-attribute があるため、カスタム変数名を判別できます。${ctrl.json}は JSP であり、JSON を出力します。コールバック関数を使用する JSONP とは異なり、グローバル変数が使用されます。これまでのところ、私は欠点を経験していません。

<script class="data" data-var="${jsonpVarName}" type="text/javascript">
    window.${jsonpVarName} = ${ctrl.json};
</script>

ステップ 3 データへのアクセス (jQuery を使用) は次のように簡単です。

var data = window[$('script.data').data('var')];

コンテキスト付きの例

HTML

<div class="myWidget">
    <button class="fetchData">Fetch Data</button>


    <c:set var="jsonpVarName">jsnpData<%= java.lang.Math.round(java.lang.Math.random() * 1000000) %></c:set>

    <script class="data" data-var="${jsonpVarName}" type="text/javascript">
        window.${jsonpVarName} = ${ctrl.json};
    </script>

</div>

Javascript

$('button.fetchData', '.myWidget').click(function (e) {

    var data = window[$('script.data', '.myWidget').data('var')];    

});

ページの読み込み時に必要な JSON データを読み込むために、インライン JSONP を使用しています。これは大量のデータではなく、HTTP リクエストが 1 つ少なくなります。

于 2013-01-25T14:49:25.627 に答える
2

(JSON-P サービスの代わりに) インライン JSON を使用する理由

JSON-P をインライン化することもできます。OK、そのメソッドを「インラインスクリプト」と呼ぶだけですが、両方の利点があります:-)

于 2013-01-18T10:12:42.080 に答える
0

http://json2html.com/を試してください 。これは、JSONをHTMLに変換するための良い方法です。

于 2013-01-18T09:48:47.980 に答える