如何从Express服务器向AJAX响应传递并以数组形式接收数据？

这个问题我之前也碰到过！核心原因是服务器返回的JSON数据没有被正确识别和解析——浏览器把它当成了普通文本字符串，而不是JavaScript数组/对象。下面分服务器端和客户端两部分给你解决方案：

一、服务器端：确保返回正确的JSON响应 #

首先要保证服务器做对两件事：

• 输出的JSON格式是标准的（键必须用双引号，不能用单引号）
• 设置响应头Content-Type: application/json

举几个常见后端的例子：

Node.js/Express #

用res.json()方法会自动帮你完成序列化和头设置，比手动res.send()更可靠：

app.get('/your-api-path', (req, res) => {
  const dbResult = [{name: 'example1'}, {name: 'example2'}];
  // res.json会自动把对象转成标准JSON字符串，并设置正确的响应头
  res.json(dbResult);
});

如果是手动处理（比如不用框架），要记得设置头并正确序列化：

const http = require('http');
http.createServer((req, res) => {
  const data = [{name: 'example1'}, {name: 'example2'}];
  res.writeHead(200, {'Content-Type': 'application/json'});
  // JSON.stringify会把对象转成标准双引号的JSON
  res.end(JSON.stringify(data));
}).listen(3000);

PHP #

用json_encode()生成标准JSON，并设置响应头：

<?php
$data = array(array('name' => 'example1'), array('name' => 'example2'));
header('Content-Type: application/json');
echo json_encode($data);
?>

二、客户端：正确解析响应数据 #

如果服务器已经设置好，大部分现代AJAX工具会自动解析JSON，但如果用原生XHR或者工具没自动处理，就需要手动解析：

原生XMLHttpRequest #

需要手动调用JSON.parse()把字符串转成数组：

const xhr = new XMLHttpRequest();
xhr.open('GET', '/your-api-path');
xhr.onload = function() {
  if (xhr.status >= 200 && xhr.status < 300) {
    // 把响应字符串解析成JavaScript数组
    const data = JSON.parse(xhr.responseText);
    // 现在可以正常遍历了
    data.forEach(item => {
      console.log('Name:', item.name);
    });
  }
};
xhr.send();

Fetch API #

用response.json()方法解析：

fetch('/your-api-path')
  .then(response => {
    // 检查响应状态是否正常
    if (!response.ok) throw new Error('Network response was not ok');
    // 解析JSON为数组
    return response.json();
  })
  .then(data => {
    data.forEach(item => {
      console.log('Name:', item.name);
    });
  })
  .catch(error => console.error('Request failed:', error));

Axios #

Axios默认会自动解析JSON响应，直接用就行：

axios.get('/your-api-path')
  .then(response => {
    const data = response.data;
    data.forEach(item => {
      console.log('Name:', item.name);
    });
  })
  .catch(error => console.error('Request failed:', error));

常见坑提醒 #

• 服务器返回的JSON必须是标准格式：键必须用双引号，不能用单引号（比如{"name": "example1"}是对的，{name: 'example1'}是无效的，会导致JSON.parse报错）
• 如果客户端拿到的是类似"[{name: 'example1'}, {name: 'example2'}]"这样的字符串（被额外加了引号），说明服务器可能多做了一次序列化，要检查后端代码是否重复调用了JSON.stringify

内容的提问来源于stack exchange，提问作者Isaac Krementsov