Inserire i dati JSON nell'input del modulo HTML nascosto?

Question

Sto costruendo una ricca applicazione Web che utilizza molti dati. Quando lo sto costruendo ho scoperto che mi stavo ripetendo più e più volte.

Questo è il problema. Ho bisogno di mettere la logica dell'applicazione nascosta in elementi html per rappresentare i dati visualizzati dal client.

Questa è una soluzione che ho trovato qualche tempo fa:

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

Ci sono due problemi con questo metodo.

1. Non riesco a rappresentare gli array.
2. È semplicemente brutto.

Ho cercato una soluzione ma non ho trovato nulla. Sono anche andato a facebook, Firebug aperto, ed ho trovato questo:

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

Questo JSON era all'interno di un elemento input[type=hidden].

ho cercato di fare la stessa cosa con 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"}]}" /> 

Ma quando provo ottenere il valore ottengo questo {.

Ho provato tutte le costanti come JSON_HEX_TAG e non ho trovato alcuna domanda di questo tipo.

Come posso inserire json in html correttamente e quindi scaricarlo con jquery/javascript?

Answer 1

La stringa è corretta, ma non può essere definita in HTML perché contiene virgolette doppie.

L'HTML richiede di evitare le virgolette quando si definisce una stringa racchiusa tra virgolette doppie.Il modo più appropriato di fare questo sta usando l'entità HTML:

value="""

da PHP:

Usa htmlspecialchars o htmlentities (http://www.php.net/manual/en/function.htmlspecialchars.php). In ogni caso, normalmente dovresti usare questo su OGNI valore che scrivi al browser client (non farlo potrebbe comportare rischi per la sicurezza).

da JavaScript:

Se avete bisogno di fare questo da JavaScript, è possibile impostare programatically il valore dell'elemento nascosto (purché la stringa JSON è già contenuta in una variabile Javascript). In questo modo non c'è bisogno di preoccuparsi che codifica per la stringa letterale:

hiddenElement.value = yourString;

Al fine di ottenere una funzione di via di fuga è possibile utilizzare, forse verificare questa discussione: Escaping HTML strings with jQuery.

Answer 2

il metodo migliore che ho trovato è la conversione l'attributo value di singoli ' citazioni: value='{"label":"value"}'

• valida JSON funziona solo con le doppie virgolette

anche, assicuratevi di sfuggire a qualsiasi virgolette singole in dati JSON

Answer 3

nel tag di input, l'attributo value in cui si sta tentando di inserire array json. Guardarlo. stai mettendo ". Il secondo " sta terminando il valore dell'attributo. quindi viene interpretato come value = "{". è necessario sfuggire a quelli ". Utilizzare invece le virgolette singole '. E controllare quindi

Answer 4

Personalmente, ho anche lo stesso problema delle virgolette nel tag di input HTML con valore JSON. Il formiato JSON contiene molte virgolette doppie come l'array che hai creato. Fornisco anche il risultato del valore "{" "alla fine

Tuttavia, ho trovato un modo molto semplice per risolvere questo problema.Il trucco consiste nell'utilizzare una virgoletta singola invece di virgolette doppie.Ad esempio in JSP di seguito:

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

i $ {deviceRow} è la JSON, che contiene molte virgolette in questo caso. ho usato firebug per esaminare i risultati del tag input, tutto ha funzionato perfettamente.

Answer 5

modo migliore per me doveva usare html & quot;

per esempio faccio questo:

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

invece di

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