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

php javascript html json

2022-08-30 18:13:26

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

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

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

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

此方法存在两个问题。

我无法表示数组。
这太丑陋了。

我寻找解决方案，但没有找到任何东西。我还去了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获取它？

答案 1

您的字符串是正确的，但无法在 HTML 中定义，因为它包含双引号。

HTML 要求您在定义本身括在双引号内的字符串时对双引号进行转义。执行此操作的适当方法是使用 HTML 实体：

value="""

从 PHP：

使用或（http://www.php.net/manual/en/function.htmlspecialchars.php）。在任何情况下，您通常都应该在写入客户端浏览器的每个值上使用它（不这样做可能会导致安全风险）。htmlspecialcharshtmlentities

来自 Javascript：

如果您需要从Javascript执行此操作，则可以以编程方式设置隐藏元素的值（前提是您的JSON字符串已包含在Javascript变量中）。这样，您就不必担心对字符串文本进行编码：

hiddenElement.value = yourString;

为了获得您可以使用的转义函数，也许可以检查以下线程：用jQuery转义HTML字符串。

答案 2

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

例如，我这样做：

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

而不是

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