Versuchen, lokale JSON-Datei zu laden, um Daten in einer HTML-Seite mit JQuery anzuzeigen

Hallo Ich versuche, lokale JSON-Datei mit JQuery zu laden, um Daten anzuzeigen, aber ich bekomme einige seltsame Fehler. Darf ich das lösen?Versuchen, lokale JSON-Datei zu laden, um Daten in einer HTML-Seite mit JQuery anzuzeigen

<html> 
<head> 
<script type="text/javascript" language="javascript" src="jquery-1.8.2.min.js"></script>   

<script type="text/javascript"> 
    $(document).ready(function(e) { 
    $.getJSON("priorities.json" , function(result){ 
     alert(result.start.count); 
    }); 
}); 
</script></head> 
</html>

Ich warne nur die Anzahl der JSON-Daten. Meine JSON-Datei befindet sich im selben Verzeichnis, in dem sich diese HTML-Datei befindet, und das JSON-Zeichenfolgenformat wird unten angezeigt.

{ 
"start": { 
    "count": "5", 
    "title": "start", 
    "priorities": [ 
     { 
      "txt": "Work" 
     }, 
     { 
      "txt": "Time Sense" 
     }, 
     { 
      "txt": "Dicipline" 
     }, 
     { 
      "txt": "Confidence" 
     }, 
     { 
      "txt": "CrossFunctional" 
     } 
    ] 
} 
}

JSON Dateinamen priorities.json und Fehler

Uncaught Reference Prioritäten nicht
definiert ist

Quelle

2013-09-05 Venkata Krishna

Überprüfen Sie Ihre HTML Markup für nicht geschlossene Tags irgendwo. Ist der "Kopf" nicht vorhanden oder Sie haben vergessen, diesen Teil der Seite zu kopieren und einzufügen? – melancia

Ich werde analysieren, aber zuerst vor dem Parsen nur gibt es mir einen Fehler. –

[Chrome wird das nicht gefallen] (http://stackoverflow.com/questions/2541949/problems-with-jquery-getjson-use-local-files-in-chrome). – mccannf

Wie die jQuery API sagt: „Load JSON-codierten Daten von dem Server mit eine GET HTTP-Anfrage. "

http://api.jquery.com/jQuery.getJSON/

So können Sie nicht eine lokale Datei mit dieser Funktion laden. Aber wie Sie im Internet surfen, dann werden Sie sehen, dass eine Datei aus Dateisystem Laden in Javascript wirklich schwierig ist, wie die folgenden Threads sagt:

Local file access with javascript

Quelle

2013-09-05 13:23:52 hequ

Eigentlich schaffte ich es mit meinem Browser - http://qtweb.net/. und ich denke, es ist auch in Chrome (zum Beispiel) machbar, wenn Sie eine Option aktivieren, wenn Sie es ausführen: http://stackoverflow.com/questions/4819060/allow-google-chrome-to-use-xmlhttprequest-to-load -a-URL-von-einer-lokalen Datei. – Joum

ja, das funktioniert mit Chrom, aber ich würde das eher als eine hack als eine endgültige Lösung .. – hequ

Lustige Geschichte: IE8 auch gearbeitet ... o_o – Joum

Aufgrund von Sicherheitsfragen (Same Origin Policy), JavaScript Zugang zu lokalen Dateien sind eingeschränkt, wenn ohne Benutzerinteraktion.

Nach https://developer.mozilla.org/en-US/docs/Same-origin_policy_for_file:_URIs:

Eine Datei nur eine andere Datei lesen kann, wenn das übergeordnete Verzeichnis der Ursprungsdatei ein Vorfahr Verzeichnis der Zieldatei ist.

eine Situation vorstellen, wenn Sie Javascript von einer Website versucht, Ihre Dateien überall in Ihrem System zu stehlen, ohne dass Sie von bewusst zu sein. Sie müssen es auf einem Webserver bereitstellen. Oder versuchen Sie, es mit einem Skript-Tag zu laden. Wie folgt aus:

<script type="text/javascript" language="javascript" src="jquery-1.8.2.min.js"></script>   
<script type="text/javascript" language="javascript" src="priorities.json"></script> 

<script type="text/javascript"> 
    $(document).ready(function(e) { 
     alert(jsonObject.start.count); 
    }); 
</script>

Ihre priorities.json Datei:

var jsonObject = { 
"start": { 
    "count": "5", 
    "title": "start", 
    "priorities": [ 
     { 
      "txt": "Work" 
     }, 
     { 
      "txt": "Time Sense" 
     }, 
     { 
      "txt": "Dicipline" 
     }, 
     { 
      "txt": "Confidence" 
     }, 
     { 
      "txt": "CrossFunctional" 
     } 
    ] 
} 
}

Oder deklarieren eine Callback-Funktion auf Ihrer Seite und wickeln Sie es mögen JSONP Technik:

<script type="text/javascript" language="javascript" src="jquery-1.8.2.min.js"> </script> 
    <script type="text/javascript"> 
      $(document).ready(function(e) { 

      }); 

      function jsonCallback(jsonObject){ 
       alert(jsonObject.start.count); 
      } 
     </script> 

<script type="text/javascript" language="javascript" src="priorities.json"></script>

Ihre priorities.json Datei :

jsonCallback({ 
    "start": { 
     "count": "5", 
     "title": "start", 
     "priorities": [ 
      { 
       "txt": "Work" 
      }, 
      { 
       "txt": "Time Sense" 
      }, 
      { 
       "txt": "Dicipline" 
      }, 
      { 
       "txt": "Confidence" 
      }, 
      { 
       "txt": "CrossFunctional" 
      } 
     ] 
    } 
    })

Die Verwendung von script tag ist eine ähnliche Technik wie JSONP, aber mit diesem Ansatz ist es nicht so flexibel. Ich empfehle die Bereitstellung auf einem Webserver.

Mit Benutzerinteraktion ist Javascript Zugriff auf Dateien erlaubt. Das ist der Fall von File API. Mit der Datei api kann javascript auf Dateien zugreifen, die vom Benutzer von <input type="file"/> ausgewählt oder vom Desktop auf den Browser gelöscht wurden.

Quelle

2013-09-05 13:27:40

Dies ist ein nettes kleines Hack – DucDigital

In dieser "Lösung" 'priorities.json 'ist keine JSON-Datei mehr, sondern eine JavaScript-Datei. – trincot

-1

Ich würde versuchen, mein Objekt als zu speichern.txt-Datei und dann holen sie wie folgt aus:

$.get('yourJsonFileAsString.txt', function(data) { 
    console.log($.parseJSON(data)); 
});

Quelle

2014-11-27 02:59:23 amir

Dies hat genau das gleiche Problem wie getJSON. – Moss

Die d3.js Visualisierung Beispiele Ich habe auf meinem lokalen Rechner zu replizieren .. die Einfuhr JSON-Daten .. alle gut funktionieren auf Mozilla Firefox-Browser; und in Chrome erhalte ich den Fehler der Cross-Origins-Einschränkungen. Es ist eine merkwürdige Sache, wie es kein Problem mit dem Importieren einer lokalen Javascript-Datei gibt, aber versuchen Sie, ein JSON zu laden, und der Browser wird nervös. Es sollte zumindest eine Einstellung geben, damit der Benutzer es übersteuern kann, wie Pop-ups blockiert sind, aber ich bekomme eine Anzeige und eine Auswahl, um sie zu entsperren. Es gibt keinen Grund, so Orwellian in dieser Angelegenheit zu sein. Benutzer sollten nicht als zu naiv behandelt werden, um zu wissen, was für sie am besten ist.

Also ich empfehle den Firefox-Browser zu verwenden, wenn Sie lokal arbeiten. Und ich hoffe, dass die Leute nicht ausflippen und damit anfangen, Mozilla zu bombardieren, um die Cross-Origin-Restriktionen für lokale Dateien durchzusetzen.

Quelle

2015-01-13 15:47:57 nikhilvj

Sie können einfach eine JavaScript-Datei in Ihren HTML-Code einfügen, die Ihr JSON-Objekt als Variable deklariert. Dann können Sie Ihre JSON-Daten beispielsweise über Ihren globalen JavaScript-Bereich unter Verwendung von data.employees aufrufen.

index.html:

<html> 
<head> 
</head> 
<body> 
    <script src="data.js"></script> 
</body> 
</html>

data.js:

var data = { 
    "start": { 
    "count": "5", 
    "title": "start", 
    "priorities": [{ 
     "txt": "Work" 
    }, { 
     "txt": "Time Sense" 
    }, { 
     "txt": "Dicipline" 
    }, { 
     "txt": "Confidence" 
    }, { 
     "txt": "CrossFunctional" 
    }] 
    } 
}

Quelle

2015-04-02 16:20:36 senornestor

Kennen Sie das aus dem HTML-Skript? ist es nicht nur console.log (Daten)? – Jouster500

Ya der Code in data.js ist global verfügbar aus dem HTML-Dokument, so dass 'Daten' oder' data.start.count' innerhalb eines '

Versuchen, lokale JSON-Datei zu laden, um Daten in einer HTML-Seite mit JQuery anzuzeigen

Antwort

Verwandte Themen