vue 提交數組的請求

隨著前端開發的快速發展，越來越多的專案採用了前後端分離的開發方式。在這種模式下，前端負責渲染視圖、互動邏輯等處理，後端則負責提供資料。前後端之間的資料交互，通常採用介面呼叫的方式。

在實際開發中，我們常常需要提交數組類型的資料。例如，使用者選擇了多個商品進行結算，就會形成一個商品清單的數組，需要將這個數組提交給後端進行處理。在 Vue 中，如何提交數組類型的請求呢？下面我們將介紹兩種方法。

方法一：將陣列拼接為字串

我們可以將陣列依照一定的格式拼接為一個字串，然後將這個字串當作請求參數傳送給後端。後端接收到請求後，再將字串解析成陣列進行處理。

程式碼範例：

// 假设有这样一个商品列表数组
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 => {
  // 请求失败处理逻辑
})

在上面的程式碼中，我們透過一個for 迴圈將商品清單陣列中的每個商品的id 拼接成一個字串，最後作為參數提交給後端。後端再將這個字串解析成數組，進行下一步處理。

但是這種方式有一定的問題，例如請求參數長度的限制等。所以我們需要使用更優雅的方式：將陣列直接傳送給後端。

方法二：使用 formData 提交資料

我們可以使用 FormData 物件來提交數組類型的請求。 FormData 是 HTML5 提供的內建對象，可以將表單中的資料組裝成一組 key-value 形式的資料。我們可以先建立一個空的 FormData 對象，然後將陣列中的每個元素加入到這個對像中，最後將整個 FormData 物件作為請求體傳送給後端。

程式碼範例：

// 假设有这样一个商品列表数组
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 => {
  // 请求失败处理逻辑
})

在上面的程式碼中，我們透過一個for 迴圈將商品清單陣列中的每個商品的id 加入到FormData 物件中，然後將整個物件作為請求體發送給後端。接收到請求後，後端直接解析 FormData 對象，就可以得到陣列類型的資料了。

總結

本文介紹了兩種在 Vue 中提交陣列類型的請求的方法，分別是將陣列拼接為字串和使用 FormData 提交資料。這兩種方法在實際開發中都有其適用場景，具體使用哪種方式，需要根據具體需求進行選擇。希望本文能對 Vue 開發者學習前後端資料互動有所幫助。

以上是vue 提交數組的請求的詳細內容。更多資訊請關注PHP中文網其他相關文章！