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

Question

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

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

这是我前段时间找到的解决方案：

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

这种方法有两个问题。

1. 我无法表示数组。
2. 简直丑陋。

我搜索了一个解决方案，但没有找到任何东西。我也去了脸书，打开萤火虫， 发现了这个：

{"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

php 在

中设置数组

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

Answer 2

看来我的回答迟了，但我想为后来的人做出贡献。 来之前你有 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 3

对我来说最好的方法是使用 html & quot;

例如我这样做：

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

而不是

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

Answer 4

就个人而言，我也面临同样的问题，即在带有 JSON 值的 HTML 输入标签中出现双引号。 JSON 格式本身包含很多双引号，就像您构建的数组一样。最后它也只是为我提供了“{””值结果。

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

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

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

Answer 5

你的字符串是正确的，但它不能在 HTML 中定义，因为它包含双引号。

当您定义一个本身包含在双引号内的字符串时，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 6

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