将JSON数据隐藏到html表单输入中? [英] Put JSON data into html form input hidden?
问题描述
我正在构建一个使用大量数据的富Web应用程序.在构建它时，我发现自己一遍又一遍地重复自己.
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.
这是问题所在.我需要将隐藏的应用程序逻辑放入HTML元素中，以表示客户端正在查看的数据.
This is the problem. I need to put hidden application logic into HTML elements to represent the data being viewed by the client.
这是我前一段时间找到的解决方案:
This is a solution I found some time ago:
<a href="bla" data-itemId="1" .... more data.
此方法有两个问题.
- 我无法表示数组.
- 这很丑.
我搜索了一个解决方案，但没有找到任何东西.我也去了脸书，打开了萤火虫， 并找到了:
I searched for a solution but did not find anything. I also went to facebook, opened firebug, and found this:
{"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]元素内.
This json was inside an input[type=hidden] element.
我试图对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 {.
我尝试了像JSON_HEX_TAG这样的所有常量，但没有发现任何此类问题.
I have tried all constants like JSON_HEX_TAG and did not find any questions of this type.
如何正确地将JSON放入HTML中，然后使用jquery/javascript来获取它?
How can I put JSON into HTML correctly and then get it with jquery/javascript?
推荐答案
您的字符串是正确的，但由于包含双引号，因此无法在HTML中定义.
Your string is correct, but it cannot be defined in HTML because it contains double quotes.
HTML要求您在定义本身包含在双引号中的String时转义双引号.适当的方法是使用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:
value="""
从PHP:
使用htmlspecialchars或htmlentities( http://www.php .net/manual/en/function.htmlspecialchars.php ).无论如何，通常您应该在写入客户端浏览器的每个值上使用此值(不这样做可能会导致安全风险).
Use htmlspecialchars or 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).
来自Java语言:
如果您需要通过Javascript执行此操作，则可以以编程方式设置hidden元素的值(前提是您的JSON字符串已包含在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:
hiddenElement.value = yourString;
为了获得可以使用的转义功能，请检查以下线程:转义HTML字符串使用jQuery .
In order to get an escape function you can use, maybe check this thread: Escaping HTML strings with jQuery .
这篇关于将JSON数据隐藏到html表单输入中?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
