Question

我正在关注YouTube上的教程，但我无法让它运行。基本上我有一个country.json文件。我正在尝试检索其中的数据。这里有什么问题？

这就是country.json文件的样子

{
  "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>

Answer 1

你可以这样： -

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

输出（在我的本地浏览器上）： - http://prntscr.com/cq2jjt

注意： - 需要从json文件$.getJSON()读取数据。

查看更多详情： - http://api.jquery.com/jquery.getjson/

Answer 2

您需要https:\\来运行Ajax，只需在本地文件中它就无法运行。特别是在Chrome中。使用设备中的Apache server并添加所有文件。并通过localhost运行该应用程序。 Ajax调用将触发。在此之前，请在Firefox中尝试相同的应用程序。 Firefox可能会在本地执行ajax。

Answer 3

我们可以通过使用jquery库来实现这一点。

$.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(""));
});

如何读取本地JSON文件

3 个答案: