Beste Möglichkeit, JSON in einem HTML-Attribut zu speichern?

Ich ein JSON-Objekt in einem Attribut auf ein HTML-element.

~~Das HTML nicht validieren.~~
Beantwortet von Quentin: Speichern von JSON in ein data-* - Attribut, die ist gültig HTML5.
Das JSON-Objekt kann jede mögliche Größe, d.h. große
Beantwortet von Maiku Mori: Die Grenze für ein HTML-Attribut ist potentiell 65536 Zeichen.
Was ist, wenn die JSON enthält Sonderzeichen? z.B. {foo: '<"bar/>'}
Beantwortet von Quentin: Kodieren von JSON-Strings, der vor dem setzen es in das Attribut, wie er gemäß den üblichen Konventionen. Für PHP verwenden Sie die htmlentities() Funktion.

BEARBEITEN - Beispiel-Lösung mittels PHP und jQuery

Schreiben der JSON-in die HTML-Attribut:

<?php
    $data = array(
        '1' => 'test',
        'foo' => '<"bar/>'
    );
    $json = json_encode($data);
?>

<a href="#" data-json="<?php echo htmlentities($json, ENT_QUOTES, 'UTF-8'); ?>">CLICK ME</a>

Abrufen von JSON mit jQuery:

$('a').click(function() {

    //Read the contents of the attribute (returns a string)
    var data = $(this).data('json');

    //Parse the string back into a proper JSON object
    var json = $.parseJSON($(this).data('json'));

    //Object now available
    console.log(json.foo);

});

Kommentar zu dem Problem

Sie sollten wahrscheinlich erklären, warum und bitten für die andere Lösung, da bin ich mir ziemlich sicher, dass dies nicht der beste. Sie können prob Daten verwenden-etwas, das Eigenschaften, aber ich bin mir nicht sicher, ob Sie halten kann "riesige" Menge an text. Für Besondere chars können Sie einfach codieren (escape() und unescape()) text. Kommentarautor: Maiku Mori

Ja limit von 65536 chars (stackoverflow.com/questions/2752457/...) Kommentarautor: Maiku Mori

Btw, wenn Ihr Attribut ist mit dem Namen data-json solltest du $(this).data('json'), das jQuery-hat Sie bedeckt auf dem Teil. Kommentarautor: Ciantic

Nur eine Anmerkung, die Benennung der Daten-suffix zu json ist nicht erforderlich. Wenn Sie gültiges json-Daten-custom_attribute es funktioniert gut mit jQuery. Kommentarautor: Garet Claborn

bitte korrigieren Sie die Klammern Sequenz )}; => }); Kommentarautor: MotsManish

InformationsquelleAutor der Frage BadHorsie | 2011-09-06

33

Das HTML nicht validieren.

Warum nicht? Die Validierung ist wirklich einfach QA, fängt viele Fehler. Verwenden Sie eine HTML-5 data-* Attribut.

Das JSON-Objekt könnte beliebig groß (also riesig).

Ich habe nicht gesehen, keine Dokumentation über browser-Grenzen-Attribut Größen.

Wenn Sie nicht in die Arme laufen, dann speichern die Daten in einer <script>. Ein Objekt definieren und anzeigen element ids zum Namen der Eigenschaft in das Objekt.

Was ist, wenn die JSON enthält Sonderzeichen? (z.B. {test: '<"myString/>'})

Folgen Sie einfach den normalen Regeln für die Einbeziehung von nicht vertrauenswürdigen Daten in Attribut-Werten. Verwenden & und " (wenn Sie das einwickeln der Attributwert in doppelte Anführungszeichen) oder ' (wenn Sie das einwickeln der Wert des Attributs in einfachen Anführungszeichen).

Beachten Sie jedoch, dass das nicht JSON (die erfordert, dass die Namen der Eigenschaft strings sein und strings werden getrennt nur mit Anführungszeichen).

InformationsquelleAutor der Antwort Quentin
15

Je nachdem, wo Sie es ausdrückte,
- In einem <div> als Sie fragte, die Sie benötigen, um sicherzustellen, dass die JSON-enthält keine HTML-specials, konnte einen tag beginnen, HTML-Kommentar eingebettet, doctype, usw.. Müssen Sie entkommen-zumindest <, und & in der Weise, dass der ursprüngliche Charakter erscheint nicht in den " Escape-Sequenz.
- In <script> Elemente, die Sie benötigen, um sicherzustellen, dass die JSON-enthält nicht ein end-tag </script> oder die Flucht text Grenze: .
- Im event-Handler, die Sie benötigen, um sicherzustellen, dass die JSON-behält seine Bedeutung, auch wenn Sie Dinge, die Aussehen wie die HTML-entities und nicht brechen Attribut Grenzen (" oder ').
Für die ersten beiden Fälle (und für die alten JSON-Parser) sollten Sie Kodieren U+2028 U+2029 da sind neue-Zeile-Zeichen in JavaScript, obwohl Sie erlaubt sind, in nicht-codierte strings in JSON.

Für die Richtigkeit, die Sie brauchen, um zu entkommen \ - und JSON Anführungszeichen, und es ist nie eine schlechte Idee, immer codieren NUL.

Wenn die HTML-könnte ausgeliefert werden, ohne dass eine Codierung von Inhalten, sollten Sie Kodieren + um zu verhindern, dass UTF-7 Angriffe.

In jedem Fall die folgenden Flucht-Tabelle arbeiten:
- NUL -> \u0000
- CR -> \n oder \u000a
- LF -> \r oder \u000d
- " -> \u0022
- & -> \u0026
- ' -> \u0027
- + -> \u002b
- / -> \/ oder \u002f
- < -> \u003c
- > -> \u003e
- \ -> \\ oder \u005c
- U+2028 -> \u2028
- U+2029 -> \u2029
Damit der JSON-string Wert für die text - Hello, <World>! mit einem Zeilenumbruch am Ende wäre "Hello, \u003cWorld\u003e!\r\n".

InformationsquelleAutor der Antwort Mike Samuel
9

Andere Weise, die Sie es tun können – ist, setzen Sie json-Daten innerhalb <script> tag, aber nicht mit type="text/javascript", aber mit type="text/bootstrap" oder type="text/json" geben, um zu vermeiden, die Ausführung von javascript.

Dann, in einen Ort, der Ihr Programm, Sie können Fragen, für die es in dieser Weise:
```
function getData(key) {
  try {
    return JSON.parse($('script[type="text/json"]#' + key).text());
  } catch (err) { //if we have not valid json or dont have it
    return null;
  } 
}
```
Auf der server-Seite, können Sie so etwas tun (in diesem Beispiel mit php und Zweig):
```
<script id="my_model" type="text/json">
  {{ my_model|json_encode()|raw }}
</script>
```
InformationsquelleAutor der Antwort gobwas

Können Sie verwenden, knockoutjs,

<p>First name: <strong data-bind="text: firstName" >todo</strong></p>
<p>Last name: <strong data-bind="text: lastName">todo</strong></p>

knockout.js

//This is a simple *viewmodel* - JavaScript that defines the data and behavior of your UI
function AppViewModel() {
    this.firstName = "Jayson";
    this.lastName = "Monterroso";
}

//Activates knockout.js
ko.applyBindings(new AppViewModel());

Ausgabe

Vorname: Jayson
Nachname: Monterroso

Prüfen:
http://learn.knockoutjs.com/

InformationsquelleAutor der Antwort jayM

4

Eine weitere option ist das base64-Kodieren von JSON-Strings, und wenn Sie brauchen, um verwenden Sie es in Ihrem javascript-entschlüsseln mit der atob() Funktion.
```
var data = JSON.parse(atob(base64EncodedJSON));
```
InformationsquelleAutor der Antwort Pavel Petrov
2

Nichts besonderes hier. Von PHP geben die JSON-string Durchlaufen htmlspecialchars um sicherzustellen, dass keine Sonderzeichen werden als HTML interpretiert. Von Javascript, kein escaping notwendig; nur setzen Sie das Attribut und du bist gut zu gehen.

InformationsquelleAutor der Antwort Matchu
0

Was man tun kann, ist cdata um Ihr element/s, wie dies
```
<![CDATA[  <div class='log' mydata='${aL.logData}'>${aL.logMessage}</div>     ]]>  
```
wo mydata ist ein raw-json-string. Hoffe das hilft dir und anderen.

InformationsquelleAutor der Antwort Binaryrespawn

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.