Umieścić dane JSON w ukrytym formacie html?

Question

Buduję bogatą aplikację internetową, która używa dużej ilości danych. Kiedy go buduję, stwierdziłem, że powtarzam się w kółko.

To jest problem. Muszę umieścić ukrytą logikę aplikacji w elementach html, aby reprezentować dane oglądane przez klienta.

Jest to rozwiązanie znalazłem jakiś czas temu:

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

Istnieją dwa problemy z tym sposobem.

1. Nie mogę reprezentować tablic.
2. To po prostu brzydkie.

Szukałem rozwiązania, ale niczego nie znalazłem. I udał się do Facebook, otwarty Firebug, i stwierdziliśmy:

{"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"} 

Ten json było wewnątrz elementu input[type=hidden].

starałem się zrobić to samo z 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"}]}" /> 

Ale gdy próbuję się wartość otrzymuję ten {.

Próbowałem wszystkich stałych, takich jak JSON_HEX_TAG i nie znalazłem żadnych pytań tego typu.

Jak poprawnie umieścić json w html, a następnie pobrać go za pomocą jquery/javascript?

Answer 1

Twój ciąg jest poprawny, ale nie można go zdefiniować w HTML, ponieważ zawiera podwójne cudzysłowy.

HTML wymaga, aby unikać podwójnych cudzysłowów podczas definiowania ciągu, który sam jest ujęty w podwójne cudzysłowy.Odpowiedni sposób robi się to za pomocą podmiot HTML:

value="""

Od PHP:

Zastosowanie htmlspecialchars lub htmlentities (http://www.php.net/manual/en/function.htmlspecialchars.php). W każdym przypadku normalnie powinieneś używać tego ponad KAŻDĄ wartości, którą piszesz do przeglądarki klienta (niewykonanie tego może spowodować zagrożenie bezpieczeństwa).

z javascript:

Jeśli trzeba to zrobić z Javascript, można programowo ustawić wartość ukrytego elementu (pod warunkiem, ciąg JSON jest już zawarta w zmiennej JavaScript). W ten sposób nie trzeba się martwić o kodującego łańcuch dosłowny:

hiddenElement.value = yourString;

W celu uzyskania funkcji escape można wykorzystać, może sprawdzić ten wątek: Escaping HTML strings with jQuery.

Answer 2

najlepsza metoda znalazłem jest konwersja atrybut wartość dla pojedynczych ' cytatów: value='{"label":"value"}'

• ważne JSON działa tylko z cudzysłowach

też, upewnij się uciec żadnych apostrofów w JSON danych

Answer 3

w twoim tagu wejściowym, atrybut wartości, w którym próbujesz umieścić tablicę json. Spójrz na to. wstawiasz ". Druga " kończy wartość atrybutu. dlatego jest interpretowany jako value = "{". musisz uciec od tych ". Zamiast tego użyj pojedynczych cudzysłowów '. Sprawdź następnie

Answer 4

Osobiście mam ten sam problem z podwójnymi cudzysłowami w tagu wejściowym HTML z wartością JSON. Formate JSON zawiera wiele podwójnych cudzysłowów, takich jak tablica, którą zbudowałeś. To po prostu zapewnia mi "{" "wynik wyniku na końcu."

Jednak znalazłem bardzo prosty sposób na rozwiązanie tego problemu.Typ polega na użyciu pojedynczego cytatu zamiast podwójnego cudzysłowu. Weź przykład w JSP poniżej:

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

The $ {deviceRow} jest JSON, który zawiera wiele cudzysłowów w tej sprawie. Użyłem Firebug zbadać wyniki tagu wejściowego, to działało idealnie.

Answer 5

najlepszym sposobem dla mnie było użycie html & quot;

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

zamiast

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