不同場景下使用Ajax發(fā)送列表數(shù)據(jù)的實踐指南
更新時間：2026年03月25日 08:26:01 作者：detayun
本文介紹了使用Ajax發(fā)送列表數(shù)據(jù)的不同方法,涵蓋原生JavaScript、jQuery和FetchAPI,討論了常見問題及解決方案,并提供了性能優(yōu)化建議和不同框架的封裝方案,需要的朋友可以參考下
在Web開發(fā)中，經(jīng)常需要將列表形式的數(shù)據(jù)（如數(shù)組、對象集合等）通過Ajax發(fā)送到服務器。本文將詳細介紹不同場景下如何使用Ajax發(fā)送列表數(shù)據(jù)，包括原生JavaScript、jQuery和現(xiàn)代Fetch API的實現(xiàn)方式，并探討常見問題及解決方案。
一、基礎概念：列表數(shù)據(jù)的常見形式
在前端開發(fā)中，列表數(shù)據(jù)通常表現(xiàn)為以下幾種形式：
- 簡單數(shù)組：
[1, 2, 3, "a", "b"] - 對象數(shù)組：
[
{ id: 1, name: "Alice" },
{ id: 2, name: "Bob" }
]- 嵌套結(jié)構(gòu)：
{
users: [
{ id: 1, roles: ["admin", "editor"] },
{ id: 2, roles: ["viewer"] }
]
}二、原生JavaScript發(fā)送列表數(shù)據(jù)
1. 使用XMLHttpRequest發(fā)送JSON格式列表
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('批量創(chuàng)建成功:', JSON.parse(xhr.responseText));
} else {
console.error('請求失敗:', xhr.statusText);
}
}
};
xhr.send(JSON.stringify(userList));2. 發(fā)送表單格式的列表數(shù)據(jù)（application/x-www-form-urlencoded）
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發(fā)送列表數(shù)據(jù)
1. 使用$.ajax發(fā)送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發(fā)送表單格式列表
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發(fā)送列表數(shù)據(jù)
1. 發(fā)送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('批量更新結(jié)果:', data))
.catch(error => console.error('請求失敗:', error));2. 發(fā)送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('上傳結(jié)果:', result);
} catch (error) {
console.error('上傳失敗:', error);
}
}
// 使用示例
const fileInput = document.getElementById('fileInput');
fileInput.addEventListener('change', (e) => {
uploadFilesWithMetadata(Array.from(e.target.files));
});五、常見問題及解決方案
1. 后端接收不到數(shù)據(jù)
問題原因：
- 請求頭
Content-Type設置不正確 - 數(shù)據(jù)序列化格式與后端期望不符
解決方案：
- 確保JSON數(shù)據(jù)發(fā)送時設置：
Content-Type: application/json - 表單數(shù)據(jù)發(fā)送時使用
application/x-www-form-urlencoded或multipart/form-data - 使用開發(fā)者工具檢查實際發(fā)送的請求體
2. 列表數(shù)據(jù)被截斷
問題原因：
- URL參數(shù)方式傳輸時長度限制
- 未正確處理特殊字符
解決方案：
- 大數(shù)據(jù)量優(yōu)先使用POST而非GET
- 對參數(shù)進行URL編碼：
encodeURIComponent(value) - 考慮使用JSON格式而非鍵值對
3. 嵌套列表結(jié)構(gòu)處理
前端示例：
const complexData = {
department: "IT",
employees: [
{ name: "Alice", skills: ["JS", "Python"] },
{ name: "Bob", skills: ["Java", "SQL"] }
]
};
// 發(fā)送方式（Fetch API）
fetch('/api/department/save', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify(complexData)
});后端處理（Spring Boot示例）：
@PostMapping("/api/department/save")
public ResponseEntity<?> saveDepartment(@RequestBody DepartmentDto dto) {
// dto應包含department字段和List<EmployeeDto> employees字段
// ...
}六、性能優(yōu)化建議
- 批量操作：盡量將多個單條操作合并為批量請求
- 壓縮傳輸：對大JSON數(shù)據(jù)啟用Gzip壓縮
- 分片上傳：超大文件采用分片上傳策略
- 進度監(jiān)控：使用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('更新結(jié)果:', result);
} catch (error) {
console.error('更新失敗:', error);
}
};
return (
<button onClick={handleBatchUpdate}>批量更新價格</button>
);
}總結(jié)
發(fā)送列表數(shù)據(jù)是Web開發(fā)中的常見需求，選擇合適的方法需要考慮：
- 數(shù)據(jù)量大小
- 是否需要傳輸文件
- 后端API設計
- 項目技術棧
對于現(xiàn)代項目，推薦優(yōu)先使用Fetch API或Axios發(fā)送JSON格式的列表數(shù)據(jù)，它們提供了簡潔的語法和良好的錯誤處理機制。在需要兼容舊瀏覽器或處理復雜表單上傳時，XMLHttpRequest仍然是可靠的選擇。無論采用哪種方式，始終確保正確設置請求頭并驗證后端接收的數(shù)據(jù)結(jié)構(gòu)。
以上就是不同場景下使用Ajax發(fā)送列表數(shù)據(jù)的實踐指南的詳細內(nèi)容，更多關于使用Ajax發(fā)送列表數(shù)據(jù)的資料請關注腳本之家其它相關文章！
相關文章
最近老總提了一個小功能，在搜索網(wǎng)吧列表的時候加上網(wǎng)吧所屬代理商這個條件，原有的搜索條件是一個地區(qū)二級聯(lián)動，現(xiàn)在需要根據(jù)不同的地區(qū)顯示不同的代理商集合。2010-08-08
本文通過實例代碼給大家介紹了Ajax實現(xiàn)動態(tài)加載組合框功能，感興趣的朋友一起看看吧2017-08-08
SpringMVC+Jquery實現(xiàn)Ajax功能
SpringMVC：是基于Spring的一個子框架(MVC框架)，功能強于Spring，這個框架主要是解決咱們Controller這一層的問題。這篇文章主要介紹了SpringMVC+Jquery實現(xiàn)Ajax功能,需要的朋友可以參考下2019-06-06
這篇文章主要介紹了Ajax跨域請求COOKIE無法帶上的解決辦法,需要的朋友可以參考下2017-04-04
下面小編就為大家?guī)硪黄褂胊jax異步提交表單的幾種方法總結(jié)。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2016-12-12
Ajax實現(xiàn)動態(tài)加載數(shù)據(jù)
這篇文章主要為大家詳細介紹了Ajax動態(tài)加載數(shù)據(jù)的小例子，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-05-05
這篇文章主要介紹了ajax遍歷xml文檔的方法,實例分析了jsp結(jié)合Ajax遍歷XML文檔的實現(xiàn)技巧,具有一定參考借鑒價值,需要的朋友可以參考下2015-07-07
Ajax serialize() 表單進行序列化方式上傳文件
這篇文章主要介紹了Ajax serialize() 表單進行序列化方式上傳文件的相關資料,需要的朋友可以參考下2017-04-04
Ajax局部刷新在之前的文章中也有介紹過，下面以一個登錄的例子為大家介紹下其具體的使用2013-12-12
這篇文章主要為大家詳細介紹了ajax實現(xiàn)分頁查詢功能，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-05-05