不同场景下使用Ajax发送列表数据的实践指南

[
  { id: 1, name: "alice" },
  { id: 2, name: "bob" }
]

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

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));

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));

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);
  }
});

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);
  });

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));

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));
});

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)
});

@postmapping("/api/department/save")
public responseentity<?> savedepartment(@requestbody departmentdto dto) {
    // dto应包含department字段和list<employeedto> employees字段
    // ...
}

// axios上传进度示例
axios.post('/api/upload', formdata, {
  onuploadprogress: progressevent => {
    const percent = math.round((progressevent.loaded * 100) / progressevent.total);
    console.log(`上传进度: ${percent}%`);
  }
});

// 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);
      }
    }
  }
}

// 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>
  );
}