axios发布数组数据答案

【问题标题】：axios post array dataaxios发布数组数据
【发布时间】：2023-03-15 19:20:01
【问题描述】：

我正在尝试向我没有太多控制权的服务器发送发布请求。我唯一知道的是，如果我在 Postman 中发布以下数据，我可以获得正确的响应

x-www-form-urlencoded radio button checked

Entered the following 2 array data:
    product_id_list[]          pid1234
    product_id_list[]          pid1235

Header - Content-Type: application/x-www-form-urlencoded

Method: Post

但是当我尝试通过 axios 进行操作时，似乎无法通过正确的参数数据。我试过了

axios.post('https://test.com/api/get_product,
    querystring.stringify({
      'product_id_list': ['pid1234', 'pid1235']
    }))
.
.
.
axios.post('https://test.com/api/get_product,
    querystring.stringify({
      'product_id_list[]': 'pid1234',
      'product_id_list[]': 'pid1235'
    }))
.
.
.

有人知道如何在 axios 中翻译这种类型的数组数据吗？

【问题讨论】：

标签： javascript reactjs http axios

【解决方案1】：

您可以尝试以下方法：

    var payload = {
            product_id_list: [
                'pid1234',
                'pid1235'
              ]
    };

    axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded';
    payloaxios.post('https://test.com/api/get_product', payload)
      .then(function (response) {
        console.log(response);
    })
    .catch(function (error) {
        console.log(error);
    });

另外，你应该好好看看axios documentation。

【讨论】：

【解决方案2】：

您可以使用本机axios 创建请求。您可以使用 data 键传递您的有效负载。

import axios from 'axios';

let payload = {
  product_id_list: ['pid1234', 'pid1235']
};

axios({
  url: 'https://test.com/api/get_product',
  method: 'post',
  data: payload
})
.then(function (response) {
    // your action after success
    console.log(response);
})
.catch(function (error) {
   // your action on error success
    console.log(error);
});

您可以尝试从浏览器here 运行您的 axios 代码。

【讨论】：

【解决方案3】：

        $.ajax({
            type: "POST",
            url: "proceso.php",
            data: {'array': array,'array2': array2},     
            success: function(data){
                console.log(data);
            }
        });

【讨论】：

【解决方案4】：

我也遇到了这个问题，我用new FormData() 解决了它。

有一个数组：

const product_id_list = ['pid1234', 'pid1235']

const bodyFormData = new FormData();

product_id_list.forEach((item) => {
    bodyFormData.append('product_id_list[]', item);
});

axios.post('https://test.com/api/get_product', bodyFormData)

这样做会将请求作为 application/x-www-form-urlencoded 发送给它，并在正文中发送正确的数据。

【讨论】：

【解决方案5】：

您可以发送带有'Content-Type': 'application/json' 标头的帖子请求（如果服务器可以处理）

const productList = [1, 2, 3, 4]

const data = JSON.stringify({product_list: productList})
const config = {
    headers: {'Content-Type': 'application/json'}
}

return axios.post('api/url', data, config)

【讨论】：

【解决方案6】：

你也可以在axios中用FormData发送一个对象数组-

let full_name = this.state.full_name;
let phone_no = this.state.phone_no;
let carts = [
       { product_id: 1, quantity: 10, ...}, 
       { product_id: 2, quantity: 5, ...}, 
     ]
let orderFormData = new FormData();
orderFormData.append('full_name', full_name);
orderFormData.append('phone_no', phone_no);

//Just stringify carts array
orderFormData.append('carts', JSON.stringify(carts));

const headers = {
  'Content-Type' : 'application/json',
  'Accept' : 'application/json',
};

axios.post(url, orderFormData, {headers: headers})
  .then(function (res) {
    console.log(res);
  })
  .catch(function (error) {
    console.log(error)
  })

您可以从后端获取您的请求。如果您使用的是 Laravel，那么您可以使用 -

获取购物车数据

json_decode($request->carts);

这将返回您使用 axios 发送的确切数组。

【讨论】：