it-swarm.com.de

Es wurde versucht, eine lokale JSON-Datei zu laden, um mithilfe von JQuery Daten in einer HTML-Seite anzuzeigen

Hallo, ich versuche, lokale JSON-Datei mit JQuery zu laden, um Daten anzuzeigen, aber ich erhalte einen seltsamen Fehler. Darf ich wissen, wie man das löst?.

<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 in demselben 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-Dateiname priority.json und Fehler ist

Nicht erfasste Referenzfehlerprioritäten sind nicht definiert

38
Venkata Krishna

Wie die jQuery-API sagt: "Laden Sie JSON-codierte Daten mithilfe einer GET-HTTP-Anforderung vom Server."

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

Sie können mit dieser Funktion also keine lokale Datei laden. Aber wenn Sie im Internet surfen, werden Sie feststellen, dass das Laden einer Datei aus dem Dateisystem in Javascript sehr schwierig ist, wie der folgende Thread besagt:

Lokaler Dateizugriff mit Javascript

21
hequ

Aus Sicherheitsgründen (gleiche Origin-Richtlinie) ist der Zugriff von Javascript auf lokale Dateien eingeschränkt, wenn keine Benutzerinteraktion erfolgt .

Laut https://developer.mozilla.org/en-US/docs/Same-Origin_policy_for_file:_URIs :

Eine Datei kann nur dann eine andere Datei lesen, wenn das übergeordnete Verzeichnis der Ursprungsdatei ein Vorgängerverzeichnis der Zieldatei ist.

Stellen Sie sich eine Situation vor, in der Javascript von einer Website versucht, Ihre Dateien irgendwo in Ihrem System zu stehlen, ohne dass Sie es merken . Sie müssen es auf einem Webserver bereitstellen. Oder versuchen Sie es mit einem Skript-Tag zu laden. So was:

<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 priority.json-Datei:

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

Oder deklarieren Sie eine Rückruffunktion auf Ihrer Seite und schließen Sie sie wie eine Jsonp-Technik um:

<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 priority.json-Datei:

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

Die Verwendung von Skript-Tags ist ähnlich wie bei JSONP, ist jedoch bei diesem Ansatz nicht so flexibel. Ich empfehle, es auf einem Webserver bereitzustellen.

Durch die Benutzerinteraktion wird Javascript der Zugriff auf Dateien ermöglicht. Das ist der Fall von File API . Mit der Datei-API kann Javascript auf Dateien zugreifen , die vom Benutzer aus <input type="file"/> Ausgewählt oder vom Desktop in den Browser verschoben wurden.

33
Khanh TO

Sie können einfach eine Javascript-Datei in Ihren HTML-Code einfügen, die Ihr JSON-Objekt als Variable deklariert. Dann können Sie beispielsweise mit data.employees Von Ihrem globalen Javascript-Bereich aus auf Ihre JSON-Daten zugreifen.

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"
    }]
  }
}
24
senornestor

app.js

$("button").click( function() {
 $.getJSON( "article.json", function(obj) {
  $.each(obj, function(key, value) {
         $("ul").append("<li>"+value.name+"'s age is : "+value.age+"</li>");
  });
 });
});

index.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Tax Calulator</title>
    <script src="jquery-3.2.0.min.js" type="text/javascript"></script>
  </head>
  <body>
    <ul></ul>
    <button>Users</button>
<script type="text/javascript" src="app.js"></script>
  </body>
</html>

article.json

{
"a": {
"name": "Abra",
"age": 125,
"company": "Dabra"
},
"b": {
"name": "Tudak tudak",
"age": 228,
"company": "Dhidak dhidak"
}
}

server.js

var http = require('http');
var fs = require('fs');

function onRequest(request,response){
  if(request.method == 'GET' && request.url == '/') {
          response.writeHead(200,{"Content-Type":"text/html"});
          fs.createReadStream("./index.html").pipe(response);
  } else if(request.method == 'GET' && request.url == '/jquery-3.2.0.min.js') {
          response.writeHead(200,{"Content-Type":"text/javascript"});
          fs.createReadStream("./jquery-3.2.0.min.js").pipe(response);
  } else if(request.method == 'GET' && request.url == '/app.js') {
          response.writeHead(200,{"Content-Type":"text/javascript"});
          fs.createReadStream("./app.js").pipe(response);
  }
  else if(request.method == 'GET' && request.url == '/article.json') {
          response.writeHead(200,{"Content-Type":"text/json"});
          fs.createReadStream("./article.json").pipe(response);
  }
}

http.createServer(onRequest).listen(2341);
console.log("Server is running ....");

Server.js führt einen einfachen Knoten-HTTP-Server in Ihrem lokalen System aus, um die Daten zu verarbeiten.

Hinweis Vergessen Sie nicht, eine dd jQuery-Bibliothek in Ihrer Ordnerstruktur zu erstellen, und ändern Sie die Versionsnummer in server.js entsprechend und index.html

Dies ist meine aktuelle https://github.com/surya4/jquery-json .

2
Surya Singh

Die Visualisierungsbeispiele für d3.js, die ich auf meinem lokalen Computer repliziert habe. Die JSON-Daten importieren. Alle funktionieren problemlos im Mozilla Firefox-Browser. und auf Chrome Ich bekomme den Fehler mit den ursprungsübergreifenden Einschränkungen. Es ist eine seltsame Sache, dass es kein Problem mit dem Import einer lokalen Javascript-Datei gibt, aber versuchen Sie, eine JSON zu laden, und der Browser wird nervös Zumindest sollte es eine Einstellung sein, die es dem Benutzer ermöglicht, die Art und Weise zu überschreiben, wie Popups blockiert werden, aber ich erhalte eine Anzeige und eine Auswahl, um sie zu entsperren. Kein Grund, in dieser Angelegenheit so orwellisch zu sein als zu naiv behandelt, um zu wissen, was für sie am besten ist.

Daher empfehle ich die Verwendung des Firefox-Browsers, wenn Sie lokal arbeiten. Und ich hoffe, dass die Leute nicht darüber ausflippen und anfangen, Mozilla zu bombardieren, um ursprungsübergreifende Beschränkungen für lokale Dateien durchzusetzen.

2
Nikhil VJ

Ich würde versuchen, mein Objekt als TXT-Datei zu speichern und es dann wie folgt abzurufen:

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