jQuery Ajax和getJSON获取后台普通json数据和层级json数据用法分析

先介绍一下“jQuery Ajax和getJSON获取后台普通json数据和层级json数据用法分析”的背景。

在前端开发中，经常需要从后台获取数据，然后根据数据进行DOM操作，并将结果返回给前端用户。为此，我们可以采用jQuery提供的Ajax和getJSON方法。今天，我们就来详细讲解一下这两种方法的用法。

1. Ajax方法获取普通json数据

Ajax方法是一种异步请求数据的方法，可以向服务器发送一个HTTP请求，获取返回值，并用JavaScript进行处理。下面是一个示例代码：

$.ajax({
  url: '/api/getdata',
  dataType: 'json',
  success: function(data) {
    console.log(data);
  },
  error: function(err) {
    console.log(err);
  }
})

在上面的代码中，我们向url为'/api/getdata'的地址发送了一个请求，并且指定返回数据格式为json。当请求成功时，打印返回的数据。如果请求失败，打印错误信息。

2. getJSON方法获取普通json数据

getJSON方法也是一种异步请求方法，但相较于Ajax方法，它的代码更简洁。下面是一个示例代码：

$.getJSON('/api/getdata', function(data) {
  console.log(data);
})

在上面的代码中，我们向url为'/api/getdata'的地址发送了一个请求，并且直接打印返回的数据。

3. Ajax方法获取层级json数据

在实际开发中，有时需要获取层级json数据（即带有多个对象和数组嵌套的json数据），这时候需要对返回的数据进行递归处理。下面是一个示例代码：

function handleData(data) {
  for(var key in data) {
    if(data.hasOwnProperty(key)) {
      if(Array.isArray(data[key]) || typeof(data[key]) === 'object') {
        handleData(data[key]);
      } else {
        console.log(key + ': ' + data[key]);
      }
    }
  }
}

$.ajax({
  url: '/api/getdata',
  dataType: 'json',
  success: function(data) {
    handleData(data);
  },
  error: function(err) {
    console.log(err);
  }
})

在上面的代码中，我们定义了一个递归函数handleData，用来处理返回的层级json数据。当返回的数据是数组或对象时，递归调用该函数；当返回的数据是字符串或数字时，打印数据的键值对。

4. getJSON方法获取层级json数据

同样地，我们可以采用getJSON方法获取层级json数据，这里也展示一个示例代码：

function handleData(data) {
  for(var key in data) {
    if(data.hasOwnProperty(key)) {
      if(Array.isArray(data[key]) || typeof(data[key]) === 'object') {
        handleData(data[key]);
      } else {
        console.log(key + ': ' + data[key]);
      }
    }
  }
}

$.getJSON('/api/getdata', function(data) {
  handleData(data);
})

在上面的代码中，我们同样采用了递归函数handleData来处理返回的层级json数据。这里采用getJSON方法发送异步请求，并将返回的数据传入handleData函数进行处理。

通过上述两组示例代码的比较，我们可以发现，相比较而言，getJSON相较于Ajax方法代码更为简洁明了，同时也更加适合获取普通的json数据。而当需要处理更加复杂的层级json数据时，则需要采用Ajax方法，并进行递归处理。