ajax如何返回json对象数组

使用Ajax返回JSON对象数组：从基础到实践

在Web开发中,Ajax（Asynchronous JavaScript and XML）技术允许我们在不刷新整个页面的情况下与服务器进行异步通信，而JSON（JavaScript Object Notation）作为一种轻量级的数据交换格式，因其易于人阅读和编写，同时也易于机器解析和生成，成为了Ajax通信中最常用的数据格式，本文将详细介绍如何使用Ajax从服务器获取JSON对象数组，并在前端正确处理这些数据。

Ajax与JSON的基本概念

Ajax简介

Ajax不是一种新的编程语言,而是一种使用现有技术的新方法，它通过在后台与服务器进行少量数据交换，使网页实现异步更新，这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。

JSON简介

JSON是一种基于JavaScript语法子集的数据格式,它使用键值对来表示数据，JSON对象数组是指多个JSON对象的集合，每个对象可以包含不同的键值对。

服务器端准备JSON对象数组

在使用Ajax获取JSON数据之前,服务器端需要能够返回JSON格式的数据，以下是一个简单的服务器端示例（以Node.js/Express为例）：

const express = require('express');
const app = express();
// 模拟数据库中的JSON对象数组
const users = [
  { id: 1, name: '张三', age: 25, email: 'zhangsan@example.com' },
  { id: 2, name: '李四', age: 30, email: 'lisi@example.com' },
  { id: 3, name: '王五', age: 28, email: 'wangwu@example.com' }
];
// 设置响应头为JSON格式
app.get('/api/users', (req, res) => {
  res.setHeader('Content-Type', 'application/json');
  res.json(users);
});
app.listen(3000, () => {
  console.log('Server is running on port 3000');
});

使用原生JavaScript获取JSON对象数组

以下是使用原生JavaScript通过Ajax获取JSON对象数组的完整示例：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">Ajax获取JSON对象数组示例</title>
</head>
<body>
  <h1>用户列表</h1>
  <div id="userList"></div>
  <button id="fetchUsers">获取用户数据</button>
  <script>
    document.getElementById('fetchUsers').addEventListener('click', function() {
      // 创建XMLHttpRequest对象
      const xhr = new XMLHttpRequest();
      // 配置请求：GET方法，请求URL，异步请求
      xhr.open('GET', 'http://localhost:3000/api/users', true);
      // 设置响应类型为JSON
      xhr.responseType = 'json';
      // 定义请求完成后的回调函数
      xhr.onload = function() {
        if (xhr.status === 200) {
          // 获取JSON对象数组
          const users = xhr.response;
          // 处理数据
          displayUsers(users);
        } else {
          console.error('请求失败，状态码：' + xhr.status);
        }
      };
      // 定义错误处理函数
      xhr.onerror = function() {
        console.error('请求发生错误');
      };
      // 发送请求
      xhr.send();
    });
    // 显示用户数据的函数
    function displayUsers(users) {
      const userListDiv = document.getElementById('userList');
      userListDiv.innerHTML = ''; // 清空现有内容
      if (users && users.length > 0) {
        const ul = document.createElement('ul');
        users.forEach(user => {
          const li = document.createElement('li');
          li.textContent = `ID: ${user.id}, 姓名: ${user.name}, 年龄: ${user.age}, 邮箱: ${user.email}`;
          ul.appendChild(li);
        });
        userListDiv.appendChild(ul);
      } else {
        userListDiv.textContent = '没有获取到用户数据';
      }
    }
  </script>
</body>
</html>

使用jQuery简化Ajax请求

jQuery库提供了更简洁的Ajax方法,可以大大简化代码：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">jQuery Ajax获取JSON对象数组示例</title>
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
  <h1>用户列表</h1>
  <div id="userList"></div>
  <button id="fetchUsers">获取用户数据</button>
  <script>
    $(document).ready(function() {
      $('#fetchUsers').click(function() {
        $.ajax({
          url: 'http://localhost:3000/api/users',
          type: 'GET',
          dataType: 'json', // 预期服务器返回的数据类型
          success: function(users) {
            displayUsers(users);
          },
          error: function(xhr, status, error) {
            console.error('请求失败：' + error);
          }
        });
      });
      function displayUsers(users) {
        const userListDiv = $('#userList');
        userListDiv.empty(); // 清空现有内容
        if (users && users.length > 0) {
          let html = '<ul>';
          users.forEach(user => {
            html += `<li>ID: ${user.id}, 姓名: ${user.name}, 年龄: ${user.age}, 邮箱: ${user.email}</li>`;
          });
          html += '</ul>';
          userListDiv.html(html);
        } else {
          userListDiv.text('没有获取到用户数据');
        }
      }
    });
  </script>
</body>
</html>

使用Fetch API（现代JavaScript方法）

Fetch API是现代浏览器中提供的更强大、更灵活的Ajax替代方案：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">Fetch API获取JSON对象数组示例</title>
</head>
<body>
  <h1>用户列表</h1>
  <div id="userList"></div>
  <button id="fetchUsers">获取用户数据</button>
  <script>
    document.getElementById('fetchUsers').addEventListener('click', async function() {
      try {
        // 使用fetch API发送请求
        const response = await fetch('http://localhost:3000/api/users');
        // 检查响应是否成功
        if (!response.ok) {
          throw new Error('网络响应不正常');
        }
        // 解析JSON数据
        const users = await response.json();
        // 处理数据
        displayUsers(users);
      } catch (error) {
        console.error('获取数据失败：', error);
      }
    });
    function displayUsers(users) {
      const userListDiv = document.getElementById('userList');
      userListDiv.innerHTML = ''; // 清空现有内容
      if (users && users.length > 0) {
        const ul = document.createElement('ul');
        users.forEach(user => {
          const li = document.createElement('li');
          li.textContent = `ID: ${user.id}, 姓名: ${user.name}, 年龄: ${user.age}, 邮箱: ${user.email}`;
          ul.appendChild(li);
        });
        userListDiv.appendChild(ul);
      } else {
        userListDiv.textContent = '没有获取到用户数据';
      }
    }
  </script>
</body>
</html>

处理跨域请求

在实际开发中,前端页面和API服务器可能不在同一个域下，这时会遇到跨域问题，解决方法包括：

服务器端设置CORS头：

// 在Express中设置CORS
const cors = require('cors');
app.use(cors());
// 或者手动设置响应头
res.setHeader('Access-Control-Allow-Origin', '*');
res.setHeader('Access-Control-Allow-Methods', 'GET, POST, PUT, DELETE');
res.setHeader('Access-Control-Allow-Headers', 'Content-Type');

使用JSONP（仅适用于GET请求）：

// 服务器端返回JSONP格式
res.jsonp({ data: users });
// 客户端使用JSONP
function fetchUsers() {
  const script = document.createElement('script');
  script.src = 'http://example.com/api/users?callback=handleUsers';
  document.body.appendChild(script);
}
function handleUsers(users) {
  displayUsers(users);
}