Ajax如何发送列表数据

Dxy12393102162026-03-25 9:09

在Web开发中，经常需要将列表形式的数据（如数组、对象集合等）通过Ajax发送到服务器。本文将详细介绍不同场景下如何使用Ajax发送列表数据，包括原生JavaScript、jQuery和现代Fetch API的实现方式，并探讨常见问题及解决方案。

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

在前端开发中，列表数据通常表现为以下几种形式：

  1. 简单数组 ：[1, 2, 3, "a", "b"]

  2. 对象数组 ：

    javascript 复制代码 
    [
  { id: 1, name: "Alice" },
  { id: 2, name: "Bob" }
]

  3. 嵌套结构 ：

    javascript 复制代码 
    {
  users: [
    { id: 1, roles: ["admin", "editor"] },
    { id: 2, roles: ["viewer"] }
  ]
}

二、原生JavaScript发送列表数据

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

javascript 复制代码 
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));

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

javascript 复制代码 
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发送列表数据

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

javascript 复制代码 
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发送表单格式列表

javascript 复制代码 
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);
  });

四、Fetch API发送列表数据

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

javascript 复制代码 
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));

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

javascript 复制代码 
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));
});

五、常见问题及解决方案

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. 嵌套列表结构处理

前端示例：

javascript 复制代码 
const complexData = {
  department: "IT",
  employees: [
    { name: "Alice", skills: ["JS", "Python"] },
    { name: "Bob", skills: ["Java", "SQL"] }
  ]
};

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

后端处理（Spring Boot示例）：

java 复制代码 
@PostMapping("/api/department/save")
public ResponseEntity<?> saveDepartment(@RequestBody DepartmentDto dto) {
    // dto应包含department字段和List<EmployeeDto> employees字段
    // ...
}

六、性能优化建议

  1. 批量操作：尽量将多个单条操作合并为批量请求

  2. 压缩传输：对大JSON数据启用Gzip压缩

  3. 分片上传：超大文件采用分片上传策略

  4. 进度监控 ：使用XMLHttpRequest或Axios的进度事件

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

七、不同框架的封装方案

1. Vue.js中的封装

javascript 复制代码 
// 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中的封装

javascript 复制代码 
// 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 (
    <button onClick={handleBatchUpdate}>批量更新价格</button>
  );
}

总结

发送列表数据是Web开发中的常见需求，选择合适的方法需要考虑：

  1. 数据量大小
  2. 是否需要传输文件
  3. 后端API设计
  4. 项目技术栈

对于现代项目，推荐优先使用Fetch API或Axios发送JSON格式的列表数据，它们提供了简洁的语法和良好的错误处理机制。在需要兼容旧浏览器或处理复杂表单上传时，XMLHttpRequest仍然是可靠的选择。无论采用哪种方式，始终确保正确设置请求头并验证后端接收的数据结构。

相关推荐
ConardLi1 分钟前
Harness 实践：让 Agent 全自动制作知识讲解视频
前端·人工智能·后端
努力干饭中20 分钟前
Vibe Coding 第二弹：做一个 Canvas K线图
前端·canvas·vibecoding
卷帘依旧41 分钟前
Vue 响应式原理：Object.defineProperty vs Proxy 深度对比
前端·vue.js
yqcoder1 小时前
原生 AJAX 揭秘：如何使用 XHR 发起请求
前端·ajax·okhttp
ZC跨境爬虫1 小时前
跟着 MDN 学 HTML day_34：（深入XML 中的 CDATASection 接口）
xml·前端·html·html5·媒体
之歆1 小时前
DAY_20JavaScript 条件语句与循环结构深度学习（二）
前端·javascript
山北雨夜漫步1 小时前
LangGraph
java·前端·算法
漓漾li1 小时前
每日面试题-前端
前端·react.js·面试
布局呆星1 小时前
Vue3 路由守卫详解：全局守卫、路由独享守卫、组件内守卫
前端·javascript·vue.js
小李子呢02111 小时前
前端八股Vue---ref操作 DOM 元素或组件，调用子组件方法
前端·javascript·vue.js
热门推荐
01GitHub 镜像站点02Codex 接入 DeepSeek API 完整配置文档03零基础教你claude code 接入 deepseek V404【AI】2026 年具身智能模型和世界模型总结05CC-Switch & Claude 基于 Linux 服务器安装使用指南06要裂开了！ChatGPT要手机号验证了？注册Codex要求验证电话号码怎么办？2026年登陆Codex要手机号验证的解决办法07Windows端Codex接入第三方模型（DeekSeek，BaiLian)08Dirtyfrag漏洞：我花了一下午搞清楚这个Linux内核提权漏洞到底在搞什么092026年AI前瞻：量子AI、具身智能与科学发现的新纪元10裂开！ChatGPT 居然开始要手机号验证，附详细解决方法