2

次のように HTML で JSON を転送すると、悪い結果が生じるでしょうか。

<div id="json" style="display: none;">{"foo": "bar"}</div>

要素テキストの<ようにエスケープされるなどの HTML 文字を仮定しますか?&lt;

JSON は厳密に解析できます。

var blah = $.parseJSON($('#json').html())

たとえば、try/catch ステートメントで。その理由は、スクリプト タグが削除されて実行されない場合に、Ajax で処理された HTML 応答で JSON を渡すことができるようにすることです。例は、jQuery .load()特別なセレクター構文を使用して作成された Ajax リクエストです。

$('#here').load('some.html #fragment')

...すべてのスクリプトタグを破棄し、次の使用を防ぎます:

<script>var blah = {"foo":"bar"}</script>

JSON が HTML 属性で渡されるのを見たことがありますが、これは同等であると思います-奇妙さ、セキュリティなどに関して-しかし、すべての追加の引用符エスケープにより、はるかに読みにくくなっています。

4

2 に答える 2

2

HTML で JS データを渡す自然な方法は、JavaScript コード (初期値/構成の場合のように実際の JavaScript コードの一部である場合) またはdata-HTML5 属性 (JS コードが必要ない場合、常にデータが必要な場合) を使用することです。何らかの形で DOM 要素に関連付けられている)。

あなたの例では、これがおそらく最良でしょう：

<div id="json" style="display: none;"
    data-something="{&quot;foo&quot;:&quot;bar&quot;}">
</div>

ただし、実際に HTML 構造に従うようにデータを再編成します。

<div class="profile-container"
    data-profile="{&quot;name&quot;:&quot;John Doe&quot;,&quot;id&quot;:123}">
    ... profile 123 ...
</div>
<div class="profile-container"
    data-profile="{&quot;name&quot;:&quot;Jane Doe&quot;,&quot;id&quot;:321}">
    ... profile 321 ...
</div>

(引用はサーバー側で行う必要があります。たとえば、PHPhtmlspecialchars(...)やPythoncgi.escape(..., True)を使用します)。

次に、複数の方法のいずれかでデータを取得できます。jQuery の.data()メソッドを使用します。

編集：

はい、JSON を HTML タグのコンテンツとして埋め込み、CSS スタイルを使用してそれを非表示にするアプローチには落とし穴があります。私が言ったように、HTML でデータを渡したい場合、唯一の「ベスト プラクティス」の方法は、それを HTML 要素の 1 つにアタッチすることです (とにかくそうするようなものですが、CSS を使用して非表示にすることができますが、スタイルを上書きする可能性のあるクライアントに影響を与えることなく、JSON/データを渡すために既存のソリューションを使用します)。欠点の 1 つの証明は次のとおりです: http://jsfiddle.net/NY7Bs/ (データは双方向に渡されますが、1 つの単純な外部スタイルがインライン スタイルをオーバーライドし、コンテンツを表示します -ドキュメントのセマンティクスへの影響については言及しません) .

于 2012-11-26T00:07:11.880 に答える
0

単に .ajax() 関数を使用しない理由は、json を含む文字列のみを取得することです。次に、提案したとおりに解析できます。

于 2012-11-25T23:57:25.100 に答える