ajax获取json数据并循环

在前端开发中，常常需要使用Ajax来获取后台返回的数据，其中一种比较常见的数据格式就是JSON。本文将介绍如何使用Ajax获取JSON数据，并在前端进行循环，展示数据。

要使用Ajax获取JSON数据，需要先定义一个XMLHttpRequest对象。然后，通过该对象向后台发送请求，获取数据。以下是示例代码：

var xhr = new XMLHttpRequest();
xhr.open("GET","http://example.com/data.json",true);
xhr.send();

在以上代码中，我们使用了GET方法向"http://example.com/data.json"发送请求。请根据自己的实际情况修改请求的URL和方法。

当后台返回数据后，需要对数据进行处理。我们可以使用JSON.parse()方法将数据解析为JSON格式的对象。以下是示例代码：

xhr.onreadystatechange = function() {
  if (xhr.readyState == 4 && xhr.status == 200) {
    var data = JSON.parse(xhr.responseText);
    //接下来可以对data进行循环，展示数据
  }
};

在以上代码中，我们使用了XMLHttpRequest对象的onreadystatechange属性，当其状态改变时，执行其指定的函数。当状态为4时（即请求已完成），并且状态码为200（即请求成功），我们就可以将获取到的数据通过JSON.parse()方法解析为JSON格式的对象，并赋值给变量data。接下来，我们就可以使用代码循环展示data中的数据了。

以下是一个简单的示例代码，假设我们的data中包含了多个人的名字：

xhr.onreadystatechange = function() {
  if (xhr.readyState == 4 && xhr.status == 200) {
    var data = JSON.parse(xhr.responseText);
    for (var i = 0; i < data.length; i++) {
      document.write("<p>" + data[i].name + "</p>");
    }
  }
};

在以上代码中，我们使用了for循环，遍历了data中的每一个对象，并将其名字展示在了<p>标签中。

以上就是关于如何使用Ajax获取JSON数据，并在前端进行循环展示的介绍。希望可以对你有所帮助。