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

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.

这种方法有两个问题。

1. I can't represent arrays.
2. 我不能代表数组。
3. It's just ugly.
4. 它只是丑陋。

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_TAG and 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获得它?

5 个解决方案

#1

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

值= ","

From PHP:

从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).

使用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。值= yourString;

In order to get an escape function you can use, maybe check this thread: Escaping HTML strings with jQuery .

为了获得可以使用的转义函数，可以检查这个线程:使用jQuery转义HTML字符串。

#2

Best way for me was to use html & quot;

对我来说最好的方法是使用html。

for example i do this:

例如，我这样做:

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

instead of

而不是

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

#3

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 = "{"。你需要避开这些。用单引号代替。然后检查

#4

the best method I've found is converting the value attribute to single ' quotes: value='{"label":"value"}'

我发现最好的方法是将value属性转换为单个' quotes: value='{"label":"value"}

• valid JSON only works with double quotes
• 有效的JSON只能使用双引号

also, make sure you escape any single quotes in JSON data

另外，确保您转义JSON数据中的任何单引号

#5

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，在本例中包含许多双引号。我用firebug检查了输入标签的结果，效果很好。