Поместить данные JSON в html-форму ввода скрытой?

Я создаю богатое веб-приложение, которое использует много данных. Когда я строил его, я обнаружил, что повторяюсь снова и снова.

Это проблема. Мне нужно поместить скрытую логику приложения в элементы HTML, чтобы представить данные, просматриваемые клиентом.

Это решение я нашел некоторое время назад:

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

У этого метода две проблемы.

  1. Я не могу представлять массивы.
  2. Это просто безобразно.

Я искал решение, но ничего не нашел. Я также пошел в 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="&quot;"

Из PHP:

Используйте htmlspecialchars или htmlentities (http://www.php.net/manual/en/function.htmlspecialchars.php). В любом случае вам обычно следует использовать это значение сверх КАЖДОГО значения, которое вы записываете в браузер клиента (это может привести к угрозе безопасности).

Из JavaScript:

Если вам нужно сделать это из Javascript, вы можете программно установить значение скрытого элемента (при условии, что ваша строка JSON уже содержится в переменной Javascript). Таким образом, вам не нужно беспокоиться о кодировании строкового литерала:

hiddenElement.value = yourString;

Чтобы получить функцию escape, которую вы можете использовать, проверьте эту ветку: Экранирование строк HTML с помощью jQuery.

Ответ 2

Лучший способ для меня - использовать html и quot;

Например, я делаю это:

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

вместо

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

Ответ 3

в вашем теге ввода, атрибут value, в котором вы пытаетесь поместить json-массив. Посмотри на это. вы помещаете ". Второй " завершает значение атрибута. поэтому он интерпретируется как value = "{". вам нужно избежать этих ". Вместо этого используйте одинарные кавычки '. И тогда проверьте

Ответ 4

Кажется, мой ответ уже поздно, но я хочу помочь тем, кто придет позже. Прежде чем прийти сюда, у вас есть понятие 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 ); ?>" >

Ответ 5

лучший способ, который я нашел, - преобразовать атрибут value в одиночные кавычки ': value='{"label":"value"}'

  • действительный JSON работает только с двойными кавычками

также убедитесь, что вы избегаете каких-либо одиночных кавычек в данных JSON.

Ответ 6

Лично я также сталкиваюсь с той же проблемой двойных кавычек в теге ввода HTML с значением JSON. Форматы JSON содержат много двойных кавычек, как и массив, который вы создали. Он также просто дает мне "{" "результат результата в конце.

Однако я нашел очень простой способ решить эту проблему. Хитрость заключается в использовании одиночной кавычки вместо двойных кавычек. Возьмите пример в JSP ниже:

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

${deviceRow} - это JSON, который содержит много двойных кавычек в этом случае. Я использовал firebug для изучения результатов входного тега, он работал отлично.

Results