Ich habe diese JSON-Datei, die ich auf dem Server generiere, den ich auf dem Client zugänglich machen möchte, da die Seite sichtbar ist. Grundsätzlich möchte ich Folgendes erreichen:
Ich habe das folgende Tag in meinem HTML-Dokument deklariert:
<script id="test" type="application/json" src="http://myresources/stuf.json">
Die in ihrer Quelle angegebene Datei enthält JSON-Daten. Wie ich gesehen habe, wurden Daten heruntergeladen, genau wie bei den Skripten.
Wie greife ich nun in Javascript darauf zu? Ich habe versucht, mit und ohne jQuery mit einer Vielzahl von Methoden auf das Skript-Tag zuzugreifen, um meine JSON-Daten abzurufen, aber irgendwie funktioniert dies nicht. Es innerHTML
hätte funktioniert, wenn die JSON-Daten inline in das Skript geschrieben worden wären. Was es nicht war und was ich nicht erreichen will.
Eine Remote-JSON-Anforderung nach dem Laden der Seite ist ebenfalls keine Option, falls Sie dies vorschlagen möchten.
quelle
<script>
Tag oder über AJAX müssen Sie noch warten, bis eine zusätzliche HTTP-Anforderung abgeschlossen ist. Der Browser lässt Sie den Skriptinhalt nicht lesen, wenn Sie ihn mit einem "src" -Attribut abrufen. Daher besteht Ihre einzige Alternative darin, eine AJAX-Anfrage zu stellen.<script src=""></script>
? Beide führen GET-Anrufe gegen Ihren Server durch.Antworten:
Sie können JSON leider nicht so laden.
Ich weiß, dass Sie denken "Warum kann ich nicht einfach
src
hier verwenden? Ich habe solche Sachen gesehen ...":... um es einfach auszudrücken, das war nur das Skript-Tag, das als Dateninhaber "missbraucht" wurde. Sie können dies mit allen Arten von Daten tun. Beispielsweise nutzen viele Template-Engines Skript-Tags, um Vorlagen zu speichern .
Sie haben eine kurze Liste von Optionen zum Laden Ihres JSON aus einer Remote-Datei:
$.get('your.json')
oder eine andere solche AJAX-Methode.Letzter Punkt:
... das macht keinen Sinn. Der Unterschied zwischen einer AJAX-Anfrage und einer Anfrage, die der Browser während der Verarbeitung Ihrer Anfrage sendet,
<script src="">
ist im Wesentlichen nichts. Sie werden beide ein GET für die Ressource durchführen. HTTP ist es egal, ob dies aufgrund eines Skript-Tags oder eines AJAX-Aufrufs erfolgt, und Ihr Server auch nicht.quelle
<script>
möglich ist, den JSON in das Tag zu schreiben , würde ich diesen Weg gehen, denke ich.Eine andere Lösung wäre, eine serverseitige Skriptsprache zu verwenden und einfach json-data inline einzuschließen. Hier ist ein Beispiel, das PHP verwendet:
Im obigen Beispiel wird ein zusätzliches Skript-Tag mit Typ verwendet
application/json
. Eine noch einfachere Lösung besteht darin, den JSON direkt in das JavaScript aufzunehmen:Der Vorteil der Lösung mit dem zusätzlichen Tag besteht darin, dass JavaScript-Code und JSON-Daten voneinander getrennt bleiben.
quelle
Es scheint, dass dies nicht möglich ist oder zumindest nicht unterstützt wird.
Aus der HTML5-Spezifikation :
quelle
Während es mit dem
script
Tag derzeit nicht möglich ist , ist es mit einem möglich,iframe
wenn es aus derselben Domain stammt.Um das oben genannte zu verwenden, ersetzen Sie einfach das Attribut
id
undsrc
durch das, was Sie benötigen. Dasid
(von dem wir in dieser Situation annehmen, dass es gleich istmySpecialId
) wird zum Speichern der Daten verwendet inwindow.jsonData["mySpecialId"]
.Mit anderen Worten, für jeden Iframe, der ein hat
id
und dasonload
Skript verwendet, werden diese Daten synchron in daswindow.jsonData
Objekt unter dem geladenid
angegebenen .Ich habe das zum Spaß gemacht und um zu zeigen, dass es "möglich" ist, aber ich empfehle nicht , es zu verwenden.
Hier ist eine Alternative, die stattdessen einen Rückruf verwendet.
In Chrom getestet und sollte in Firefox funktionieren. Unsicher über IE oder Safari.
quelle
Ich stimme Ben zu. Sie können die einfache JSON-Datei nicht laden / importieren.
Wenn Sie dies jedoch unbedingt möchten und flexibel die JSON-Datei aktualisieren möchten, können Sie dies tun
my-json.js
index.html
quelle
Überprüfen Sie diese Antwort: https://stackoverflow.com/a/7346598/1764509
quelle
Wenn Sie JSON von einer anderen Domain laden müssen: http://en.wikipedia.org/wiki/JSONP
Beachten Sie jedoch mögliche XSSI-Angriffe: https://www.scip.ch/en/?labs.20160414
Wenn es sich um dieselbe Domain handelt, verwenden Sie einfach Ajax.
quelle
Platzieren Sie so etwas in Ihrer Skriptdatei
json-content.js
Rufen Sie es dann vom Skript-Tag aus auf
dann können Sie es im nächsten Skript verwenden
quelle
Eine weitere Alternative zur Verwendung des exakten JSON in Javascript. Da es sich um eine Javascript-Objektnotation handelt, können Sie Ihr Objekt einfach direkt mit der JSON-Notation erstellen. Wenn Sie dies in einer .js-Datei speichern, können Sie das Objekt in Ihrer Anwendung verwenden. Dies war eine nützliche Option für mich, als ich einige statische JSON-Daten hatte, die ich getrennt vom Rest meiner App in einer Datei zwischenspeichern wollte.
quelle