Question

尝试获取此json数据以显示在HTML div中

[{
  "botten": ["Krispig", "tunn"]
},
]

HTML文档中的div具有类名box1_data。这是我的脚本：

var bottenInfo = document.getElementsByClassName("box1_data");

$.getJSON('choosepizza.json', function(choosePizzaData) {
  choosePizza(choosePizzaData);

  function choosePizza(choosePizzaData) {
    var request = new XMLHttpRequest();
    request.open('GET', 'choosepizza.json');
    request.onload = function() {
      var data = JSON.parse(request.responseText);
      renderHTML(data);
    };
    request.send();

    function renderHTML(bottenData) {
      var text = "";
      for (var i = 0; i < bottenData.length; i++) {
        text += '<p>' + bottenData[i].botten + '<p>';
      }
      bottenInfo.innerHTML = text;
    }
  });

我在做什么错？

krispig和tunn应该显示在.box1_data div中。

Answer 1

对于纯JS和jQuery之间的差异以及AJAX的工作方式，您的代码似乎有些困惑。您当前正在使用不同的逻辑两次发出相同的请求，解析一个已经解析过的对象，无法正确访问生成的对象，并试图将一个节点集合作为一个元素进行访问。

要解决此问题，您只需要遍历结果，该结果将自动反序列化为一个对象，并生成将HTML放置在所需元素中：

$.getJSON('choosepizza.json', function(choosePizzaData) {
  var html = choosePizzaData[0].botten.map(function(botten) {
    return '<p>' + botten + '</p>';
  });
  $(".box1_data").html(html);
});

这是一个没有AJAX的有效示例，显然在这里不适用于SO：

// the response from the request:
var choosePizzaData = [{
  "botten": ["Krispig", "tunn"]
}]

// within the AJAX callback
var html = choosePizzaData[0].botten.map(function(botten) {
  return '<p>' + botten + '</p>';
});
$(".box1_data").html(html);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="box1_data"></div>

如何获取JSON数据以显示在HTML div中？

1 个答案: