ajax获取json数据后如何放在页面

当使用Ajax获取JSON数据后，我们可以通过以下步骤将数据放在页面中。

我们需要创建一个XMLHttpRequest对象，用于发送Ajax请求。然后，我们需要指定请求的URL和请求方法，通常是使用GET或POST方法。接着，我们需要定义一个回调函数，用于处理服务器返回的数据。

示例代码如下：

// 创建XMLHttpRequest对象
var xhr = new XMLHttpRequest();
// 指定请求的URL和请求方法
xhr.open('GET', 'example.json', true);
// 定义回调函数
xhr.onreadystatechange = function() {
  if (xhr.readyState === XMLHttpRequest.DONE) {
    if (xhr.status === 200) {
      // 处理服务器返回的数据
      var response = JSON.parse(xhr.responseText);
      // 将数据放在页面中
      var container = document.getElementById('container');
      for (var i = 0; i < response.length; i++) {
        var item = document.createElement('div');
        item.innerHTML = response[i].name;
        container.appendChild(item);
      }
    } else {
      console.error('请求失败：' + xhr.status);
    }
  }
};
// 发送Ajax请求
xhr.send();

在上述示例代码中，我们首先创建了一个XMLHttpRequest对象，并使用open方法指定了GET请求的URL。然后，我们定义了一个回调函数，该函数会在请求状态发生变化时被触发。在回调函数中，我们首先检查请求的状态是否为XMLHttpRequest.DONE，表示请求已完成。然后，我们再检查响应的状态码是否为200，表示请求成功。如果成功，我们使用JSON.parse方法将服务器返回的JSON字符串转换为JavaScript对象，并将数据放在页面中。

在这个示例中，我们假设服务器返回的JSON数据是一个包含多个对象的数组。我们使用一个循环来遍历数组，并将每个对象的name属性放在一个新创建的div元素中，然后将该元素添加到页面的container元素中。

需要注意的是，由于Ajax请求是异步的，所以我们需要在回调函数中处理服务器返回的数据。我们还需要处理请求失败的情况，可以通过检查状态码来判断请求是否成功。如果请求失败，我们可以在控制台输出错误信息。

通过Ajax获取JSON数据后，我们可以使用XMLHttpRequest对象发送请求，并在回调函数中处理服务器返回的数据。然后，我们可以根据数据的结构和需求，将数据放在页面中的适当位置。