将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;

为了获得你可以使用的转义函数，可以查看这个帖子：Escaping HTML strings with jQuery。

Answer 2

对我来说最好的方法是使用html＆amp; QUOT;

例如我这样做：

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

而不是

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

Answer 3

在输入标记中，您尝试放置json数组的value属性。看它。你放"。第二个"结束了属性值。因此它被解释为value = "{"。你需要逃脱那些"。请改用单引号'。然后检查

Answer 4

看来我的答案来晚了，但我想为以后再来的人们做些贡献。 在来到这里之前，您已经有了HTML的概念。使用单引号'，尽管它仍然可以工作，但是不符合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 ); ?>" >

Answer 5

php 在

中设置数组

<input type="checkbox" name="deviceInfo" value="<?php print_r(json_encode(array_filter($array_data), JSON_FORCE_OBJECT));?>" />
?>

Answer 6

就个人而言，我也遇到了带有JSON值的HTML输入标记中双引号的问题。 JSON格式本身包含很多双引号，就像你构建的数组一样。它最后也只提供了“{”“值结果。

然而，我找到了解决这个问题的一种非常简单的方法。诀窍是使用单引号而不是双引号。以下JSP中的示例：

<input type="checkbox" name="deviceInfo" value='${deviceRow}'>

$ {deviceRow}是JSON，在这种情况下包含许多双引号。我用firebug来检查输入标签的结果，它工作得很完美。