Javascript 将 JSON 数据放入隐藏的 html 表单输入？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/8576339/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Put JSON data into html form input hidden?
提问by Pinokyo
I'm building a rich web application that uses a lot of data. When I'm building it I found that I was repeating myself over and over.
我正在构建一个使用大量数据的富 Web 应用程序。当我构建它时，我发现我一遍又一遍地重复自己。
This is the problem. I need to put hidden application logic into HTML elements to represent the data being viewed by the client.
这就是问题。我需要将隐藏的应用程序逻辑放入 HTML 元素中以表示客户端正在查看的数据。
This is a solution I found some time ago:
这是我前段时间找到的解决方案：
<a href="bla" data-itemId="1" .... more data.
There are two problems with this method.
这种方法有两个问题。
- I can't represent arrays.
- It's just ugly.
- 我不能代表数组。
- 它只是丑陋。
I searched for a solution but did not find anything. I also went to facebook, opened firebug, and found this:
我搜索了解决方案，但没有找到任何东西。我也去了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"}
This json was inside an input[type=hidden]element.
这个 json 在一个input[type=hidden]元素中。
I tried to do the same thing with json_encode();
我试图做同样的事情 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"}]}" />
But when I try getting the value I get this {.
但是当我尝试获取价值时，我得到了这个{。
I have tried all constants like JSON_HEX_TAGand did not find any questions of this type.
我已经尝试了所有类似的常量JSON_HEX_TAG，但没有发现任何此类问题。
How can I put JSON into HTML correctly and then get it with jquery/javascript?
如何将 JSON 正确放入 HTML 中，然后使用 jquery/javascript 获取它？
回答by jjmontes
Your string is correct, but it cannot be defined in HTML because it contains double quotes.
您的字符串是正确的，但不能在 HTML 中定义，因为它包含双引号。
HTML requires you to escape double quotes when you are defining a String that is itself enclosed within double quotes. The appropriate way of doing this is using the HTML entity:
当您定义一个本身被双引号括起来的字符串时，HTML 要求您转义双引号。正确的做法是使用 HTML 实体：
value="""
value="""
From PHP:
来自 PHP：
Use htmlspecialcharsor htmlentities(http://www.php.net/manual/en/function.htmlspecialchars.php). In any case, you normally should be using this over EVERY value you write to the client browser (not doing so may result in security risks).
使用htmlspecialchars或htmlentities( http://www.php.net/manual/en/function.htmlspecialchars.php)。在任何情况下，您通常都应该在写入客户端浏览器的每个值上使用它（不这样做可能会导致安全风险）。
From Javascript:
来自 Javascript：
If you need to do this from Javascript, you can programatically set the value of the hidden element (provided your JSON string is already contained in a Javascript variable). This way you don't have to worry about encoding the string literal:
如果您需要从 Javascript 执行此操作，您可以通过编程方式设置隐藏元素的值（假设您的 JSON 字符串已包含在 Javascript 变量中）。这样您就不必担心对字符串文字进行编码：
hiddenElement.value = yourString;
hiddenElement.value = yourString;
In order to get an escape function you can use, maybe check this thread: Escaping HTML strings with jQuery.
为了获得您可以使用的转义函数，请查看此线程：使用 jQuery 转义 HTML 字符串。
回答by Ebrahim
Best way for me was to use html & quot;
对我来说最好的方法是使用 html & quot;
for example i do this:
例如我这样做：
<input type="hidden" id="v" value="[{"id":"1"}]" >
instead of
代替
<input type="hidden" id="v" value="[{"id":"1"}]" >
回答by halee97
It seems my answer is late, but I want to contribute to those who come later. Before coming here you have the concept of HTML.Use single quotes ' , Should not do that, although it still works, it is against the HTML principle . The best way is: Use htmlspecialchars or htmlentities. @jjmont said above.
看来我的回答晚了，但我想为后来的人贡献一份力量。来这里之前你有HTML的概念。使用单引号'，不应该这样做，虽然它仍然有效，但它违反了HTML原则。最好的方法是：使用 htmlspecialchars 或 htmlentities。@jjmont 上面说了。
I have a small example:
我有一个小例子：
<input id="jsondata" value="<?php echo htmlspecialchars( json_encode($data), ENT_COMPAT ); ?>" >
||
||
<input id="jsondata" value="<?php echo htmlspecialchars( json_encode($data), ENT_NOQUOTES ); ?>" >
回答by Shades88
in your input tag, the value attribute in which you are trying to put json array. Look at it. you are putting ". Second "is ending the attribute value. thus it is being interpreted as value = "{". you need to escape those ". Use single quotes 'instead. And check then
在您的输入标签中，您试图将 json 数组放入其中的 value 属性。看它。你在放"。其次"是结束属性值。因此它被解释为value = "{"。你需要逃避那些"。请改用单引号'。然后检查
回答by ShadowScorpion
Personally, I also face the same problem of double quotes in HTML input tag with JSON value. The JSON formate contains a lot of double quotes in itself like the array you built. It also just provide me "{"" value result in the end.
就我个人而言，我也面临同样的问题，即 HTML 输入标签中带有 JSON 值的双引号问题。JSON 格式本身包含很多双引号，就像您构建的数组一样。最后它也只是为我提供“{””值结果。
However, I found a very simple way to solve this problem. The trick is using single quote instead of double quotes. Take example in JSP below:
但是，我找到了一个非常简单的方法来解决这个问题。诀窍是使用单引号而不是双引号。以下面的 JSP 为例：
<input type="checkbox" name="deviceInfo" value='${deviceRow}'>
The ${deviceRow} is the JSON which contains many double quotes in this case. I have used firebug to examine the results of input tag, it worked perfect.
${deviceRow} 是在这种情况下包含许多双引号的 JSON。我已经使用萤火虫来检查输入标签的结果，它工作得很好。
