web-dev-qa-db-ja.com

JSONデータをHTMLフォーム入力に非表示にしますか？

大量のデータを使用するリッチWebアプリケーションを構築しています。それを構築しているとき、何度も何度も自分自身を繰り返していることがわかりました。

これが問題です。非表示のアプリケーションロジックをHTML要素に入れて、クライアントが表示しているデータを表す必要があります。

これは私が少し前に見つけた解決策です：

_<a href="bla" data-itemId="1" .... more data.
_

この方法には2つの問題があります。

  1. 配列を表現できません。
  2. それはただ醜いです。

解決策を探しましたが何も見つかりませんでした。私はまた、facebookに行き、firebugを開いて、これを見つけました：

_{"actor":"19034719952","target_fbid":"454811929952","target_profile_id":"19034719952","type_id":"7","source":"1","assoc_obj_id":"","source_app_id":"","extra_story_params":[],"content_timestamp":"1324385453","check_hash":"9eabc3553e8a2fb6"}
_

このjsonは_input[type=hidden]_要素内にありました。

私はjson_encode();で同じことをやろうとしました

_<input type="hidden" name="track" value="{"_id":{"$id":"4eee908f615c2102e9010000"},"link":"george-wassouf-flag-of-my-heart-longing","file":"\/m\/tracks\/t.4eee908daca2a3.49941874.mp3","lyrics":null,"freezed":false,"hits":0,"images":{"large":"\/assets\/static\/default.track.large.jpg","thumb":"\/assets\/static\/default.track.thumb.jpg","icon":"\/assets\/static\/default.track.icon.jpg"},"duration":"300","created":{"sec":1324257423,"usec":78000},"albums":[{"_id":{"$id":"4eee8d63615c21f6e7000000"},"names":{"ar":"\u0643\u0644\u0627\u0645\u0643 \u064a\u0627 \u062d\u0628\u064a\u0628\u064a","en":"Kalamak ya Habibi"},"link":"george-wassouf-kalamak-ya-habibi","images":{"original":"\/m\/pics\/albums\/o.4eee8d612c3183.11879972.jpg","poster":"\/m\/pics\/albums\/p.4eee8d63967072.02645896.jpg","large":"\/m\/pics\/albums\/l.4eee8d63a89111.20372767.jpg","small":"\/m\/pics\/albums\/s.4eee8d63b18927.47242533.jpg","thumb":"\/m\/pics\/albums\/t.4eee8d63b7f1f4.11879932.jpg","icon":"\/m\/pics\/albums\/i.4eee8d63bf1304.59902753.jpg"}},{"_id":{"$id":"4eee8d63615c21f6e7000000"},"name":"Kalamak ya Habibi","link":"george-wassouf-kalamak-ya-habibi"}],"name":"Flag of my heart longing","title":"Flag of my heart longing","mp3":"\/m\/tracks\/t.4eee908daca2a3.49941874.mp3","poster":"\/m\/pics\/artists\/p.4eee85cd7ed579.65275366.jpg","artists":[{"_id":{"$id":"4eee85cd615c21ece6000000"},"name":"George Wassouf","link":"george-wassouf"}]}" />
_

しかし、値を取得しようとすると、これは_{_になります。

_JSON_HEX_TAG_のようなすべての定数を試してみましたが、このタイプの質問は見つかりませんでした。

JSONをHTMLに正しく入れて、jquery/javascriptで取得するにはどうすればよいですか？

javascriptphphtmljson
20
Pinokyo

文字列は正しいですが、二重引用符が含まれているためHTMLでは定義できません。

HTMLでは、それ自体が二重引用符で囲まれた文字列を定義するときに、二重引用符をエスケープする必要があります。これを行う適切な方法は、HTMLエンティティを使用することです。

value="&quot;"

PHPから：

htmlspecialcharsまたはhtmlentitiesを使用します（ http://www.php.net/manual/en/function.htmlspecialchars.php ）。いずれの場合も、通常、クライアントブラウザに書き込むすべての値に対してこれを使用する必要があります（そうしないと、セキュリティリスクが発生する可能性があります）。

JavaScriptから：

JavaScriptからこれを行う必要がある場合は、プログラムで非表示要素の値を設定できます（JSON文字列がすでにJavaScript変数に含まれている場合）。これにより、文字列リテラルのエンコードについて心配する必要がなくなります。

hiddenElement.value = yourString;

使用できるエスケープ関数を取得するには、多分このスレッドをチェックしてください： jQueryでHTML文字列をエスケープする 。

36
jjmontes

私にとって最良の方法は、html＆quot;を使用することでした。

たとえば、私はこれを行います：

 <input type="hidden" id="v" value="[{&quot;id&quot;:&quot;1&quot;}]" >

の代わりに

 <input type="hidden" id="v" value="[{"id":"1"}]" >
2
Ebrahim

私の答えは遅いようですが、後から来る人に貢献したいと思います。ここに来る前に、HTMLの概念があります。単一引用符を使用してください '、それはすべきではありません。最善の方法は、htmlspecialcharsまたはhtmlentitiesを使用することです。 @jjmontは言った。

小さな例があります：

<input id="jsondata" value="<?php echo htmlspecialchars( json_encode($data), ENT_COMPAT ); ?>" >

||

<input id="jsondata" value="<?php echo htmlspecialchars( json_encode($data), ENT_NOQUOTES ); ?>" >
1
halee97

入力タグで、json配列を配置しようとしているvalue属性。それを見ろ。あなたは"を入れています。 2番目の"は属性値を終了しています。したがって、value = "{"として解釈されます。それらをエスケープする必要があります"。代わりに単一引用符'を使用してください。そしてチェックして

0
Shades88