javascript - 从 json 文件中检索数据

Question

我有一个名为 person.json 的 JSON 文件. JSON 文件位于数据文件夹中。

这是 JSON 数据:

 {
   "name": "Goa Wei",
   "age": 31,
   "phone": "202-555-0104",
   "group": 3
 }
       

我有 html 代码在名为 containerDatadump 的 div 类中显示信息当点击 <input id="get" type="submit" value="Get"></input> .我编写了以下 Javascript 代码。

var container = $("div.containerDatadump");
$(document).ready(function () {
    $("input#get").click(function () {
        $.ajax({
            type: "GET",
            url: "data/person.json",
            dataType: "json",

            success: function (data) {
                $.each(data, function (index, item) {
                    $.each(item, function (key, value) {
                        container.append(key + " :" + value + "</br>");

                    });
                    container.append("<br/></br>");
                });
            }
        });
    });

});

我已经做到了。我尽力调试问题但未能成功。

谁能帮我找出我的代码有什么问题？这真的对我有帮助。

Answer 1

我的回答看起来像放弃，但我认为您可以通过使用 $.getJSON 而不是常规的 ajax 调用来改进您的代码。

$.getJSON 是 ( more info ) 的简写 ajax 调用:

$.ajax({
  dataType: "json",
  url: url,
  data: data,
  success: success
});

我还使用 JSON 生成器生成数据 (LINK) 以防止浏览器出现问题。

这样你的代码就更简洁了(在我看来)。

$(document).ready(function () {
  var container = $(".containerDatadump");
  $("#get").click(function () {
    $.getJSON("https://www.json-generator.com/api/json/get/ceoSrTPote?indent=2", function(data){
      $.each( data, function( key, val ) {
        container.append(key + " :" + val + "</br>");
      });
    });
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="containerDatadump"></div>
<input id="get" type="submit" value="Get"></input>