2021/04/28 前端post请求传数组

  • 背景:后端需要这种格式的数据,接口文档要求如下

post请求传数组

  • 我也是第一次见,后端说这叫,post一个表单数组,原来的项目里有现成的,参考如下
    post请求传数组
  • 网上看,这种描述大致是?同名key传值?
    在这里插入图片描述

  • 解决方法
  • 代码
    在这里插入图片描述
  • 公司大佬封装的tool方法 附代码
let tool = {
 toPhpData(obj) {
   let newobj = {};

   function isArray(object) {
     return (
       object && typeof object === "object" && Array == object.constructor
     );
   }

   for (let x in obj) {
     if (isArray(obj[x])) {
       for (let i = 0; i < obj[x].length; i++) {
         let newx = x + "[" + i + "]";
         //newobj[newx] = obj[x][i];
         if (obj[x][i]) {
           let item = obj[x][i];
           for (var key in item) {
             let newy = newx + "[" + key + "]";
             newobj[newy] = item[key];
           }
         }
       }
     } else {
       newobj[x] = obj[x];
     }
   }
   return newobj;
 },
};
前端开发中,通过 POST 请求数组类型的参数时,需要注意数据的序列化方式以及后端接口的解析逻辑。以下是几种常见方法及注意事项: ### 使用 `application/json` 格式发送数组 将整个请求体以 JSON 格式发送是最常见的做法,适用于大多数现代后端框架(如 Express、Spring Boot、Laravel 等)。 ```javascript const data = ['value1', 'value2', 'value3']; fetch('/api/endpoint', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ data }) }) ``` 后端 PHP 示例(对应引用[1])可以这样接收: ```php if ($_SERVER['REQUEST_METHOD'] == 'POST') { $input = json_decode(file_get_contents('php://input'), true); $data = $input['data']; // 此时 $data 是一个数组 } ``` 此方式结构清晰,易于调试和维护[^1]。 --- ### 使用 `FormData` 和 `append` 方法发送数组 如果需要上文件或使用 `multipart/form-data` 编码格式,可以通过多次调用 `append` 方法来发送数组内容。 ```javascript const formData = new FormData(); const data = ['value1', 'value2', 'value3']; data.forEach((value, index) => { formData.append(`data[${index}]`, value); }); fetch('/api/endpoint', { method: 'POST', body: formData }); ``` PHP 后端可以直接通过 `$_POST['data']` 接收为数组形式[^1]。 --- ### 在 Vue 中使用 Axios 发送数组 如果你使用的是 Vue 并配合 Axios,可以通过 `qs.stringify` 来正确编码数组参数。 ```javascript import axios from 'axios'; import qs from 'qs'; const data = ['value1', 'value2', 'value3']; axios.post('/api/endpoint', qs.stringify({ data }, { arrayFormat: 'repeat' }), { headers: { 'Content-Type': 'application/x-www-form-urlencoded' } }); ``` 该方式确保数组参数被正确编码为 `data=value1&data=value2&data=value3` 的形式,适合不支持 JSON 解析的旧后端接口[^3]。 --- ### 注意事项 - **避免直接数组作为键值对**:某些 HTTP 客户端(如 Axios)在默认情况下处理数组的方式可能与后端预期不符,容易导致参数丢失或解析失败。 - **检查后端接受方式**:确认后端是否期望接收到 JSON 字符串还是 `multipart/form-data` 或 `application/x-www-form-urlencoded` 格式的数组。 - **跨语言兼容性**:不同后端语言对接收数组的支持略有差异,建议统一使用 JSON 格式进行通信以提高兼容性。 ---
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值