将JSON数据放入隐藏的html表单输入中？

Question

我正在构建一个使用大量数据的富Web应用程序.当我建造它时,我发现我一遍又一遍地重复着自己.

这就是问题.我需要将隐藏的应用程序逻辑放入html元素中以表示客户端正在查看的数据.

这是我前段时间发现的解决方案:

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

这种方法存在两个问题.

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获取它？

Answer 1

您的字符串是正确的,但它不能在HTML中定义,因为它包含双引号.

当您定义一个本身用双引号括起来的String时,HTML要求您转义双引号.执行此操作的适当方法是使用HTML实体:

value="""

来自PHP:

使用htmlspecialchars或htmlentities(http://www.php.net/manual/en/function.htmlspecialchars.php).在任何情况下,您通常应该使用此值而不是您写入客户端浏览器的每个值(不这样做可能会导致安全风险).

来自Javascript:

如果您需要从Javascript执行此操作,则可以以编程方式设置隐藏元素的值(前提是您的JSON字符串已包含在Javascript变量中).这样您就不必担心编码字符串文字了:

hiddenElement.value = yourString;

为了获得你可以使用的转义函数,也许检查这个线程:用jQuery转义HTML字符串.