ajax json如何输出

最近在学习 Ajax 和 JSON 的使用，发现了其中很重要的一点：如何输出 Ajax 请求返回的 JSON 数据。

首先，我们需要了解 JSON 的格式。JSON（JavaScript 对象表示法）是一种轻量级的数据交换格式，其基本格式为：

{
    "key1": "value1","key2": "value2","key3": "value3"
}

在 Ajax 请求中，我们可以通过使用 XMLHttpRequest 对象来获取返回的 JSON 数据：

var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function() {
  if (this.readyState == 4 && this.status == 200) {
    console.log(this.responseText);
  }
};
xhr.open("GET","example.json",true);
xhr.send();

在以上代码中，我们使用了 XMLHttpRequest 对象的 onreadystatechange 事件来检测 Ajax 请求的状态变化。如果请求状态为 4（已完成）且响应状态为 200（请求成功），则可以通过 this.responseText 获取返回的 JSON 数据。

接下来就是将 JSON 数据输出到页面中的过程。我们可以使用 JavaScript 的 JSON.parse() 方法将字符串形式的 JSON 数据解析为 JavaScript 对象，然后在页面中展示：

var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function() {
  if (this.readyState == 4 && this.status == 200) {
    var data = JSON.parse(this.responseText);
    var output = document.getElementById("output");
    var html = "";
    for (var i in data) {
      html += "<li>" + i + ": " + data[i] + "</li>";
    }
    output.innerHTML = html;
  }
};
xhr.open("GET",true);
xhr.send();

在以上代码中，我们通过 getElementById() 方法获取了展示数据的元素，并使用 for 循环遍历了解析后的 JavaScript 对象，将其拼接为 HTML 标签的形式后插入到元素内。

总结一下，Ajax 技术和 JSON 数据格式的使用已经渐渐成为了 Web 开发的基石之一，而了解如何输出返回的 JSON 数据也可以更好地帮助我们理解其运作原理。希望这篇文章能够对大家有所帮助。