Ajax发送列表数据的方法

实际开发中，需要把列表数据通过Ajax扔给后端的场景，其实还挺常见的。比如批量提交表单、上传多个文件，或者一次性更新一批订单状态——这些操作背后，都离不开列表数据的传递。今天就来聊聊，在不同场景下，怎么用Ajax把这些列表数据妥妥地发出去。我们会覆盖原生Ja vaScript、jQuery，以及现代Fetch API这几种主流方式，顺带把那些容易踩坑的地方也一并捋清楚。

一、基础概念：列表数据的常见形式

在动手写代码之前，先看看列表数据通常长什么样。前端开发中，最常见的无非是这么几种：

• 简单数组：[1, 2, 3, "a", "b"]
• 对象数组：

[
  { id: 1, name: "Alice" },
  { id: 2, name: "Bob" }
]

嵌套结构：

{
  users: [
    { id: 1, roles: ["admin", "editor"] },
    { id: 2, roles: ["viewer"] }
  ]
}

这些结构看着简单，但在传输时，格式选择不当，往往就会引发各种问题。

二、原生Ja vaScript发送列表数据

1. 使用XMLHttpRequest发送JSON格式列表

最传统的方式，就是用XMLHttpRequest把数据序列化成JSON字符串，再通过send方法发出去。拿批量创建用户举个例子：

const userList = [
  { id: 1, name: "Alice" },
  { id: 2, name: "Bob" }
];

const xhr = new XMLHttpRequest();
xhr.open('POST', '/api/users/batch', true);
xhr.setRequestHeader('Content-Type', 'application/json');
xhr.onreadystatechange = function() {
  if (xhr.readyState === 4) {
    if (xhr.status === 200) {
      console.log('批量创建成功:', JSON.parse(xhr.responseText));
    } else {
      console.error('请求失败:', xhr.statusText);
    }
  }
};
xhr.send(JSON.stringify(userList));

核心思路就是：先把数据整理成JSON字符串，然后明确告诉后端“我发的是JSON”，这样后端解析起来就完全对得上。

2. 发送表单格式的列表数据（application/x-www-form-urlencoded）

如果后端接口要求的是传统的表单格式，那处理起来稍微麻烦一点。你需要手动构造一个类似 users[0][id]=1&users[0][name]=Alice 这样的字符串，然后通过URLSearchParams来生成：

function listToFormData(list) {
  const params = new URLSearchParams();
  list.forEach((item, index) => {
    params.append(`users[${index}][id]`, item.id);
    params.append(`users[${index}][name]`, item.name);
  });
  return params.toString();
}

const userList = [
  { id: 1, name: "Alice" },
  { id: 2, name: "Bob" }
];

const xhr = new XMLHttpRequest();
xhr.open('POST', '/api/users/batch', true);
xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
xhr.onreadystatechange = function() {
  // 处理响应...
};
xhr.send(listToFormData(userList));

这种方式的劣势很明显：结构复杂时，手动拼字符串非常容易出错，维护起来也头疼。

三、jQuery发送列表数据

虽然现在jQuery用得少了，但在一些老项目里，它依然是主力。发送JSON列表时，核心逻辑和原生方式差不多，只是语法更简洁：

1. 使用$.ajax发送JSON列表

const productList = [
  { sku: "A001", price: 99.9 },
  { sku: "B002", price: 199.9 }
];

$.ajax({
  url: '/api/products/update',
  type: 'POST',
  contentType: 'application/json',
  data: JSON.stringify(productList),
  success: function(response) {
    console.log('批量更新成功:', response);
  },
  error: function(xhr) {
    console.error('请求失败:', xhr.statusText);
  }
});

2. 使用$.post发送表单格式列表

如果后端接口是表单格式，可以用FormData来构造，然后用$.post发送：

function createFormData(list) {
  const formData = new FormData();
  list.forEach((item, index) => {
    formData.append(`items[${index}][sku]`, item.sku);
    formData.append(`items[${index}][price]`, item.price);
  });
  return formData;
}

const inventoryList = [
  { sku: "A001", price: 99.9 },
  { sku: "B002", price: 199.9 }
];

$.post('/api/inventory/batch', createFormData(inventoryList))
  .done(function(response) {
    console.log('批量入库成功:', response);
  })
  .fail(function(xhr) {
    console.error('请求失败:', xhr.statusText);
  });

这里有个细节：使用FormData时，jQuery会自动设置正确的Content-Type，包括multipart/form-data所需的boundary，不需要手动指定。

四、Fetch API发送列表数据

对于现代项目，Fetch API是更推荐的选择。它基于Promise，语法更直观，对异步操作的处理也更友好。

1. 发送JSON列表（推荐方式）

const orderList = [
  { orderId: "ORD2023001", status: "shipped" },
  { orderId: "ORD2023002", status: "processing" }
];

fetch('/api/orders/batch-update', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json',
    'Authorization': 'Bearer your_token_here'
  },
  body: JSON.stringify(orderList)
})
  .then(response => {
    if (!response.ok) throw new Error('Network response was not ok');
    return response.json();
  })
  .then(data => console.log('批量更新结果:', data))
  .catch(error => console.error('请求失败:', error));

简单来说，就是把整个列表数据序列化成JSON字符串，放到body里，然后通过fetch发出去。这种方式清晰直接，后端解析起来也毫无压力。

2. 发送FormData列表（适合文件上传场景）

当列表里包含文件时，FormData是绕不开的选择。每个文件项可以附带一些元数据，一并上传：

async function uploadFilesWithMetadata(fileList) {
  const formData = new FormData();
  fileList.forEach((file, index) => {
    formData.append(`files[${index}]`, file);
    formData.append(`metadata[${index}][name]`, `file_${index}`);
    formData.append(`metadata[${index}][size]`, file.size);
  });

  try {
    const response = await fetch('/api/uploads/batch', {
      method: 'POST',
      body: formData
      // 注意：使用FormData时不要手动设置Content-Type
      // 浏览器会自动添加正确的boundary
    });
    const result = await response.json();
    console.log('上传结果:', result);
  } catch (error) {
    console.error('上传失败:', error);
  }
}

// 使用示例
const fileInput = document.getElementById('fileInput');
fileInput.addEventListener('change', (e) => {
  uploadFilesWithMetadata(Array.from(e.target.files));
});

这个场景下，手动设置Content-Type会出问题，因为浏览器需要自己生成一个包含boundary的multipart/form-data头。最好的做法就是完全交给浏览器去处理。

五、常见问题及解决方案

1. 后端接收不到数据

问题原因：

• 请求头Content-Type设置不正确
• 数据序列化格式与后端期望不符

解决方案：

• JSON数据发送时，务必设置 Content-Type: application/json
• 表单数据发送时，使用 application/x-www-form-urlencoded 或 multipart/form-data
• 打开开发者工具，检查实际发送的请求体，数据和格式一眼就能看出问题

2. 列表数据被截断

问题原因：

• URL参数方式传输时，数据量过大导致长度超限
• 特殊字符未正确处理

解决方案：

• 数据量大时，优先用POST，别用GET
• 对参数进行URL编码：encodeURIComponent(value)
• 考虑用JSON格式替代键值对，结构更清晰，也避免长度问题

3. 嵌套列表结构处理

当列表数据包含嵌套子列表时，用JSON格式是最省心的。前端直接序列化，后端用对应的DTO接收即可。

前端示例：

const complexData = {
  department: "IT",
  employees: [
    { name: "Alice", skills: ["JS", "Python"] },
    { name: "Bob", skills: ["Ja va", "SQL"] }
  ]
};

// 发送方式（Fetch API）
fetch('/api/department/sa ve', {
  method: 'POST',
  headers: { 'Content-Type': 'application/json' },
  body: JSON.stringify(complexData)
});

后端处理（Spring Boot示例）：

@PostMapping("/api/department/sa ve")
public ResponseEntity sa veDepartment(@RequestBody DepartmentDto dto) {
    // dto应包含department字段和List employees字段
    // ...
}

后端只要定义好DTO，像处理普通对象一样接收即可，完全不需要额外的解析工作。

六、性能优化建议

数据量大了之后，性能问题就不得不考虑。几个实用的优化技巧：

1. 批量操作：别一个一个发请求，把多个单条操作合并成一个批量请求，网络开销会大幅下降
2. 压缩传输：大JSON数据建议启用Gzip压缩，传输体积能缩小不少
3. 分片上传：超大文件采用分片上传策略，避免单次请求超时
4. 进度监控：使用XMLHttpRequest或Axios的进度事件，让用户知道上传进度

   // Axios上传进度示例
   axios.post('/api/upload', formData, {
     onUploadProgress: progressEvent => {
       const percent = Math.round((progressEvent.loaded * 100) / progressEvent.total);
       console.log(`上传进度: ${percent}%`);
     }
   });

七、不同框架的封装方案

在实际项目中，我们通常不会在每个组件里都重复写一遍发送逻辑，而是会封装成可复用的工具函数。

1. Vue.js中的封装

// utils/request.js
import axios from 'axios';

export function postList(url, data) {
  return axios.post(url, data, {
    headers: { 'Content-Type': 'application/json' }
  });
}

// 组件中使用
import { postList } from '@/utils/request';

export default {
  methods: {
    async submitOrders() {
      const orders = [
        { id: 1, qty: 2 },
        { id: 2, qty: 1 }
      ];
      try {
        const response = await postList('/api/orders/batch', orders);
        // 处理响应...
      } catch (error) {
        console.error('提交失败:', error);
      }
    }
  }
}

2. React中的封装

// api/batchApi.js
export const updateProductsBatch = async (products) => {
  const response = await fetch('/api/products/batch', {
    method: 'PUT',
    headers: {
      'Content-Type': 'application/json',
    },
    body: JSON.stringify(products)
  });
  return response.json();
};

// 组件中使用
import { updateProductsBatch } from './api/batchApi';

function ProductList() {
  const handleBatchUpdate = async () => {
    const products = [
      { id: 101, price: 19.99 },
      { id: 102, price: 29.99 }
    ];
    try {
      const result = await updateProductsBatch(products);
      console.log('更新结果:', result);
    } catch (error) {
      console.error('更新失败:', error);
    }
  };

  return (
    批量更新价格
  );
}

总结

发送列表数据是Web开发中绕不开的环节。选择哪种方式，取决于几个关键因素：数据量有多大、是否需要传输文件、后端API的设计风格，以及项目本身的技术栈。

对于现代项目，推荐优先使用Fetch API或Axios，以JSON格式发送列表数据。它们语法简洁，错误处理机制完善，而且对异步操作的支持非常友好。如果项目需要兼容旧浏览器，或者处理复杂表单上传，XMLHttpRequest仍然是可靠的后备方案。无论走哪条路，核心原则就一条：确保请求头设置正确，并且前后端对数据结构的理解完全一致。这一点做到了，大部分问题都能迎刃而解。