JQuery ajax返回JSON时的处理方式 (三种方式)

当使用 JQuery 发送 ajax 请求获取 JSON 数据时，我们需要对返回数据进行处理。下面总结了三种常用的方式：使用回调函数、使用 Promise 对象和使用 async/await。

使用回调函数

使用回调函数处理返回的 JSON 数据是最常见的方式，可以通过在 $.ajax() 函数的 success 属性中指定一个回调函数来实现。该回调函数会在 ajax 请求成功获取到 JSON 数据时被调用，然后可以将获取到的数据作为参数来使用。

示例代码：

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

在上述示例代码中，我们使用 $.ajax() 函数发送一个 GET 请求，该请求需要获取 JSON 数据。指定 success 属性后，当请求成功时，回调函数会被调用，并将获取到的 JSON 数据作为参数传递给回调函数。

使用 Promise 对象

使用 Promise 对象是一种基于回调函数的方式，但相对更加可读和易于维护。我们可以通过 $.ajax() 函数返回一个实现了 Promise 接口的对象，在这个 Promise 对象的 then() 方法中定义回调函数。

示例代码：

$.ajax({
    url: 'example.com/api/data',
    dataType: 'json',
}).then(function(data) {
    console.log(data);
});

在上述示例代码中，我们仍然是使用了 $.ajax() 函数来发送请求并获取 JSON 数据，但没有指定 success 属性。当 $.ajax() 函数成功获取到 JSON 数据时，它会返回一个 Promise 对象。而在 Promise 对象的 then() 方法中，我们定义了一个回调函数来处理获取到的数据。

使用 async/await

使用 async/await 是一种基于 Promise 的方式，是 ES2017 新增的特性。通过使用 async 关键字来表示一个异步函数，然后在异步函数内部使用 await 来等待 Promise 对象完成并返回结果。

示例代码：

async function fetchData() {
    const response = await $.ajax({
        url: 'example.com/api/data',
        dataType: 'json'
    });
    console.log(response);
}

fetchData();

在上述示例代码中，我们定义了一个异步函数 fetchData()，并在内部使用 await 来等待 $.ajax() 函数返回 Promise 对象。当 Promise 对象成功 resolved 后，我们将返回的数据存储到 response 变量中，并在控制台输出。最终，我们直接调用 fetchData() 函数来获取 JSON 数据。

以上就是 JQuery 通过 ajax 获取 JSON 数据后的三种处理方式。