wake-up-neo.net

HTML/Javascript: Zugriff auf JSON-Daten, die mit src in ein Script-Tag geladen wurden

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 erreichen: 

Ich habe das folgende Tag in meinem HTML-Dokument deklariert: 

<script id="test" type="application/json" src="http://myresources/stuf.json">

Die in der Quelle angegebene Datei enthält JSON-Daten. Wie ich gesehen habe, wurden Daten heruntergeladen, genau wie bei den Skripten. 

Nun, wie kann ich mit Javascript darauf zugreifen? Ich habe versucht, mit und ohne jQuery auf das Skript-Tag zuzugreifen. Dabei habe ich mit einer Vielzahl von Methoden versucht, meine JSON-Daten abzurufen, aber irgendwie funktioniert das nicht. Die innerHTML zu bekommen, hätte funktioniert, wenn die Json-Daten in das Skript geschrieben worden wären. Was es nicht war und was ich nicht erreichen möchte. 

Eine Remote-JSON-Anforderung nach dem Laden einer Seite ist ebenfalls keine Option, falls Sie dies vorschlagen möchten. 

javascripthtmljsonhtml5script-tag
72
ChuckE

Sie können JSON nicht so laden, sorry.

Ich weiß, dass du denkst "Warum kann ich hier nicht einfach src verwenden? Ich habe solche Sachen gesehen ...":

<script id="myJson" type="application/json">
 { 
   name: 'Foo' 
 }
</script>

<script type="text/javascript">
    $(function() {
        var x = JSON.parse($('#myJson').html());
        alert(x.name); //Foo
     });
</script>

... um es einfach auszudrücken, das war nur das Script-Tag, das als Datenhalter "missbraucht" wurde. Das können Sie mit allen Arten von Daten machen. Beispielsweise nutzen viele Template-Engines Skript-Tags, um Vorlagen zu speichern .

Sie haben eine kurze Liste von Optionen, um Ihre JSON aus einer Remote-Datei zu laden:

  1. Verwenden Sie $.get('your.json') oder eine andere solche Methode AJAX.
  2. Schreiben Sie eine Datei, die eine globale Variable für Ihren Json festlegt. (scheint hokey).
  3. Ziehe es in einen unsichtbaren Iframe und kratze den Inhalt davon ab, nachdem er geladen wurde (ich nenne diesen "1997-Modus")
  4. Wenden Sie sich an einen Voodoo-Priester.

Schlusspunkt: 

Eine Remote-JSON-Anforderung nach dem Laden einer Seite ist ebenfalls keine Option, falls Sie dies vorschlagen möchten.

... das macht keinen Sinn. Der Unterschied zwischen einer AJAX - Anforderung und einer vom Browser während der Verarbeitung Ihres <script src=""> gesendeten Anforderung ist im Wesentlichen nichts. Sie werden beide ein GET für die Ressource durchführen. HTTP kümmert sich nicht darum, ob dies aufgrund eines Skript-Tags oder eines AJAX -Aufrufs erfolgt. Dies gilt auch für Ihren Server.

94
Ben Lesh

Eine andere Lösung wäre die Verwendung einer serverseitigen Skriptsprache und die einfache Einbindung von Json-Daten. Hier ist ein Beispiel, das PHP verwendet:

<script id="data" type="application/json"><?php include('stuff.json'); ?></script>
<script>
var jsonData = JSON.parse(document.getElementById('data').textContent)
</script>

Das obige Beispiel verwendet ein zusätzliches Skripttag mit dem Typ application/json. Eine noch einfachere Lösung besteht darin, JSON direkt in JavaScript einzubinden:

<script>var jsonData = <?php include('stuff.json');?>;</script>

Der Vorteil der Lösung mit dem zusätzlichen Tag besteht darin, dass JavaScript-Code und JSON-Daten voneinander getrennt bleiben.

8
terabaud

Es scheint, dass dies nicht möglich ist oder zumindest nicht unterstützt wird.

Aus der HTML5-Spezifikation :

Bei der Verwendung von data blocks (im Gegensatz zu Scripts) müssen die Daten inline eingebettet werden, das Format der Daten muss mit dem type-Attribut angegeben werden, das src-Attribut darf nicht angegeben werden und der Inhalt des Skriptelements muss den für das verwendete Format festgelegten Anforderungen entsprechen.

5
btx9000

Wenn Sie JSON von einer anderen Domäne laden müssen: http://en.wikipedia.org/wiki/JSONP
Beachten Sie jedoch mögliche XSSI-Angriffe: https://www.scip.ch/de/?labs.20160414

Wenn es sich um dieselbe Domäne handelt, verwenden Sie einfach Ajax.

2
Vitaliy Kaplich

Überprüfen Sie diese Antwort: https://stackoverflow.com/a/7346598/1764509

$.getJSON("test.json", function(json) {
    console.log(json); // this will show the info it in firebug console
});
2
L.Grillo

Mit dem Tag script ist dies derzeit nicht möglich, mit einer iframe jedoch, wenn sie aus derselben Domäne stammt.

Ich habe das aus Spaß gemacht und gezeigt, dass es "möglich" ist, aber ich - nicht empfehle, dass es verwendet wird.

<script>
    function someCallback(data){
        /** do something with data */
        console.log(data);

    }
    function jsonOnLoad(callback){
        const raw = this.contentWindow.document.body.textContent.trim();
        try {
          const data = JSON.parse(raw);
          /** do something with data */
          callback(data);
        }catch(e){
          console.warn(e.message);
        }
        this.remove();
    }
</script>
<!-- I frame with src pointing to json file on server, onload we apply "this" to have the iframe context, display none as we don't want to show the iframe -->
<iframe src="your/link/to/some.json" onload="jsonOnLoad.apply(this, someCallback)" style="display: none;"></iframe>

In Chrom getestet und sollte in Firefox funktionieren. Unsicher über IE oder Safari.

2
kemicofa

platziere so etwas in deiner Skriptdatei json-content.js

var mainjson = { your json data}

rufen Sie es dann über das Skript-Tag auf

<script src="json-content.js"></script>

dann können Sie es im nächsten Skript verwenden

<script>
console.log(mainjson)
</script>
0
hossein sedighian

Ich stimme Ben zu. Sie können die einfache JSON-Datei nicht laden/importieren.

Wenn Sie dies unbedingt tun möchten und die Json-Datei flexibel aktualisieren können, können Sie dies tun

meine-json.js

   var myJSON = {
      id: "12ws",
      name: "smith"
    }

index.html

<head>
  <script src="my-json.js"></script>
</head>
<body onload="document.getElementById('json-holder').innerHTML = JSON.stringify(myJSON);">
  <div id="json-holder"></div>
</body>
0
Karan

Eine weitere Alternative, um den genauen Json in Javascript zu verwenden. Da es sich um eine JavaScript-Objektnotation handelt, können Sie Ihr Objekt 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, wenn ich statische Json-Daten hatte, die ich in einer Datei getrennt von dem Rest meiner App cachen wollte.

    //Just hard code json directly within JS
    //here I create an object CLC that represents the json!
    $scope.CLC = {
        "ContentLayouts": [
            {
                "ContentLayoutID": 1,
                "ContentLayoutTitle": "Right",
                "ContentLayoutImageUrl": "/Wasabi/Common/gfx/layout/right.png",
                "ContentLayoutIndex": 0,
                "IsDefault": true
            },
            {
                "ContentLayoutID": 2,
                "ContentLayoutTitle": "Bottom",
                "ContentLayoutImageUrl": "/Wasabi/Common/gfx/layout/bottom.png",
                "ContentLayoutIndex": 1,
                "IsDefault": false
            },
            {
                "ContentLayoutID": 3,
                "ContentLayoutTitle": "Top",
                "ContentLayoutImageUrl": "/Wasabi/Common/gfx/layout/top.png",
                "ContentLayoutIndex": 2,
                "IsDefault": false
            }
        ]
    };
0
DominicTurner