vue submits an array request

With the rapid development of front-end development, more and more projects adopt the front-end and back-end separation development method. In this mode, the front end is responsible for rendering views, interaction logic and other processing, while the back end is responsible for providing data. Data interaction between the front and back ends usually takes the form of interface calls.

In actual development, we often need to submit array type data. For example, if the user selects multiple products for settlement, an array of product lists will be formed, and this array needs to be submitted to the backend for processing. In Vue, how to submit an array type request? Below we will introduce two methods.

Method 1: Splice the array into a string

We can splice the array into a string according to a certain format, and then send this string to the backend as a request parameter. After the backend receives the request, it parses the string into an array for processing.

Code example:

// 假设有这样一个商品列表数组
let goodsList = [
  {id: 1, name: '商品1', price: 100},
  {id: 2, name: '商品2', price: 200},
  {id: 3, name: '商品3', price: 300}
]

// 将数组拼接为字符串
let str = ''
for (let i in goodsList) {
  str += goodsList[i].id + ','
}
// 去掉最后一个逗号
str = str.slice(0, str.length - 1)

// 发送请求，携带字符串参数
axios.get('/api/order', {
  params: {
    goodsIds: str
  }
})
.then(response => {
  // 请求成功处理逻辑
})
.catch(error => {
  // 请求失败处理逻辑
})

In the above code, we use a for loop to splice the id of each product in the product list array into a string, and finally submit it as a parameter to end. The backend then parses this string into an array for the next step of processing.

However, there are certain problems with this method, such as restrictions on the length of request parameters. So we need to use a more elegant way: send the array directly to the backend.

Method 2: Use formData to submit data

We can use the FormData object to submit array type requests. FormData is a built-in object provided by HTML5, which can assemble the data in the form into a set of data in the form of key-value. We can first create an empty FormData object, then add each element in the array to this object, and finally send the entire FormData object to the backend as the request body.

Code example:

// 假设有这样一个商品列表数组
let goodsList = [
  {id: 1, name: '商品1', price: 100},
  {id: 2, name: '商品2', price: 200},
  {id: 3, name: '商品3', price: 300}
]

// 创建一个 FormData 对象
let formData = new FormData()

// 将每个商品添加到 FormData 对象中
for (let i in goodsList) {
  formData.append('goodsIds', goodsList[i].id)
}

// 发送请求，携带 FormData 对象
axios.post('/api/order', formData)
.then(response => {
  // 请求成功处理逻辑
})
.catch(error => {
  // 请求失败处理逻辑
})

In the above code, we add the id of each item in the item list array to the FormData object through a for loop, and then use the entire object as a request The body is sent to the backend. After receiving the request, the backend directly parses the FormData object to obtain array type data.

Summary

This article introduces two methods of submitting array type requests in Vue, which are concatenating arrays into strings and using FormData to submit data. Both methods have their applicable scenarios in actual development. Which method to use needs to be chosen according to specific needs. I hope this article can be helpful to Vue developers learning front-end and back-end data interaction.

The above is the detailed content of vue submits an array request. For more information, please follow other related articles on the PHP Chinese website!