ajax json显示数据格式化

今天我们要来讨论一种非常常见的前端技术，那就是 AJAX 和 JSON。 AJAX 是一种异步的请求方式，它可以向服务器请求数据而不需要刷新页面，提高了前端的用户体验。而 JSON 则是一种轻量级的数据交换格式，通过 JSON，前后端可以进行数据的传递和解析。 在前端的实际应用中，我们常常需要通过 AJAX 请求数据，并将请求到的数据展现在页面上。这时候，就需要对数据进行格式化，以便于用户的浏览和理解。 下面，我们来看一下如何使用 AJAX 和 JSON 来显示格式化的数据。 首先，我们需要编写一个 jQuery 的 AJAX 请求，请求服务器返回一段 JSON 数据：

$.ajax({
  type: "GET",url: "data.json",dataType: "json",success: function(data) {
    // 请求成功后的处理
  },error: function(jqXHR,textStatus,errorThrown) {
    // 请求失败时的处理
  }
});

这段代码中，我们使用了 jQuery 的 AJAX 请求，并指定了请求的方式、地址、数据类型等信息。在请求成功后，我们可以对返回的 JSON 数据进行处理。 接下来，让我们假设服务器返回了以下这段 JSON 数据：

{
  "name": "小明","age": 18,"gender": "male","hobbies": ["football","basketball","swimming"],"address": {
    "province": "江苏省","city": "南京市","street": "玄武区xxx街道xxx号"
  }
}

我们可以使用 jQuery 的 each 函数，遍历这个 JSON 数据，并将它们展示在页面上。具体代码如下：

$.ajax({
  type: "GET",success: function(data) {
    var html = "";
    $.each(data,function(key,value) {
      // 格式化数据并添加到页面中
      if (typeof value === "object") {
        // 复杂类型数据
        html += "
" + key + "
";
        $.each(value,function(k,v) {
          html += "
    " + k + "：" + v + "
";
        });
      } else {
        // 简单类型数据
        html += "
" + key + "：" + value + "
";
      }
    });
    $("#result").html(html);  // 将格式化后的数据添加到页面中
  },errorThrown) {
    alert("请求出错：" + textStatus);
  }
});

在这段代码中，我们先定义了一个空的字符串 html，用来存储格式化后的数据。然后，使用 jQuery 的 each 函数，遍历了整个 JSON 数据。如果是复杂类型的数据，我们则需要递归遍历，并在前面添加缩进。最后将格式化后的数据添加到页面中。 最后，我们来看一下页面上的效果：

这就是使用 AJAX 和 JSON 来显示格式化的数据的方法。通过这种方法，我们可以将原本一堆杂乱无章的数据变成易于阅读的格式，提高了用户的体验。