2016-10-05 3 views
1

Ich folge einem Tutorial auf YouTube, aber ich konnte es nicht laufen lassen. Grundsätzlich habe ich eine country.json Datei. Ich versuche, Daten darin zu erhalten. Was ist hier falsch?? DieseWie lese ich eine lokale JSON-Datei?

ist, wie country.json Datei sieht aus wie

{ 
    "name": "Germany", 
    "capital": "Berlin", 
    "pop": "some value" 
} 

JavaScript

var container = $("div.container"); 
$("input#get").click(function() { 
    $.ajax({ 
    type: "Get", 
    url: "country.json", 
    dataType: "json", 
    successs: function (data) { 
     $.each(data, function (index, item) { 
     $.each(item, function (key, value) { 
      container.append(key + " : " + value + "</br>"); 
     }); 
     container.appendChild("<br/><br>") 
     }); 
    } 
    }); 
}); 

HTML

<div class="container"></div> 
<div id="form-area"> 
    <h2>Get</h2> 
    <input type="submit" id="get" value="get"> 
</div> 
+0

Ist das nicht Datentyp wartet einen MIME-Typ? Ich habe immer 'dataType:" application/json "' verwendet. Verwenden Sie auch die vollständige URL zu der Datei, aber seien Sie vorsichtig, diese Datei muss sich in einem öffentlichen Verzeichnis befinden. –

Antwort

3

Sie es wie folgt zu erreichen: -

<head> 
    <meta charset="UTF-8"> 
    <title>Title</title> 
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script> 

</head> 
<body> 
<div class="container"></div> 
<div id="form-area"> 
    <h2>Get</h2> 
    <input type="submit" id="get" value="get"> 
</div> 
</body> 
</html> 

<script type="text/javascript"> 
var container = $(".container"); //check change here 
$("#get").click(function() { //check change here 
    $.getJSON("country.json", function(data) { 
     var myhtml = ''; // create an empty variable 
     $.each(data, function (key, value) { 
      myhtml += key + ' : ' + value + '</br>'; // append data to variable 

     }); 
     container.append(myhtml); // append the whole data (variable) to div 
    }); 
}); 
</script> 

Output (auf meinem lokalen Browser): - http://prntscr.com/cq2jjt

Hinweis: - Zum Lesen von Daten aus der JSON-Datei ist $.getJSON() erforderlich.

prüfen Detail: - http://api.jquery.com/jquery.getjson/

+0

Vielen Dank alle .. –

+0

@aliak froh, Ihnen zu helfen. :) :) –

1

Sie benötigen https:\\ die Ajax, einfach in lokale Datei auszuführen es wird nicht funktionieren . Speziell in Chrome. Verwenden Sie die Apache server in Ihrem Computer und fügen Sie alle Ihre Datei hinzu. Und führen Sie die Anwendung über localhost. Ajax-Anruf wird ausgelöst. Vorher dazu die gleiche Anwendung in Firefox 1 ausprobieren. Firefox könnte den Ajax lokal ausführen.

1

wir können diese acheive von Jquery-Bibliothek ..

$.getJSON("ajax/country.json", function(data) { 
    var items = []; 
    $.each(data, function(key, val) { 
     items.push("<li id='" + key + "'>" + val + "</li>"); 
    }); 
    $('#form-area').html(items.join("")); 
});