后台返回的json怎么在前端处理

当网页上的数据需要动态更新时，我们常常需要从后端获取数据，这些数据通常是以JSON（JavaScript Object Notation）格式返回的，因为JSON轻量级、易于阅读和编写，同时也易于机器解析和生成，当我们在前端收到这些数据后，该如何处理呢？

我们要确保后端正确地返回了JSON数据，这通常意味着后端API会返回一个MIME类型为application/json的响应，前端需要使用JavaScript来解析这些数据，并根据需要更新页面。

使用Fetch API获取数据

现代的前端开发中，我们经常使用Fetch API来发送网络请求，这是一个强大的工具，允许我们以异步方式获取资源，下面是一个基本的示例，展示如何使用Fetch API来获取JSON数据：

fetch('https://api.example.com/data')
  .then(response => response.json()) // 解析JSON数据
  .then(data => {
    // 处理数据
    console.log(data);
  })
  .catch(error => {
    // 处理错误
    console.error('Error:', error);
  });

处理JSON数据

一旦我们得到了JSON数据，下一步就是处理这些数据，这可能包括遍历数组、访问对象属性、过滤数据等，如果我们得到了一个用户列表，我们可能想要将每个用户的名字显示在页面上：

fetch('https://api.example.com/users')
  .then(response => response.json())
  .then(users => {
    const userList = document.getElementById('userList');
    users.forEach(user => {
      const listItem = document.createElement('li');
      listItem.textContent = user.name;
      userList.appendChild(listItem);
    });
  })
  .catch(error => console.error('Error:', error));