vue menyerahkan permintaan tatasusunan

Dengan perkembangan pesat pembangunan bahagian hadapan, semakin banyak projek menggunakan kaedah pembangunan pemisahan bahagian hadapan dan belakang. Dalam mod ini, bahagian hadapan bertanggungjawab untuk memaparkan paparan, logik interaksi dan pemprosesan lain, manakala bahagian belakang bertanggungjawab untuk menyediakan data. Interaksi data antara hujung hadapan dan belakang biasanya berbentuk panggilan antara muka.

Dalam pembangunan sebenar, kami selalunya perlu menyerahkan data jenis tatasusunan. Contohnya, jika pengguna memilih berbilang produk untuk penyelesaian, tatasusunan senarai produk akan dibentuk dan tatasusunan ini perlu diserahkan ke bahagian belakang untuk diproses. Dalam Vue, bagaimana untuk menyerahkan permintaan jenis tatasusunan? Di bawah ini kami akan memperkenalkan dua kaedah.

Kaedah 1: Sambung tatasusunan menjadi rentetan

Kita boleh sambung tatasusunan menjadi rentetan mengikut format tertentu, dan kemudian hantar rentetan ini ke hujung belakang sebagai parameter permintaan. Selepas bahagian belakang menerima permintaan, ia menghuraikan rentetan ke dalam tatasusunan untuk diproses.

Contoh kod:

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

Dalam kod di atas, kami menggunakan gelung for untuk menyambung id setiap produk dalam tatasusunan senarai produk ke dalam rentetan, dan akhirnya menyerahkannya sebagai parameter kepada tamat. Bahagian belakang kemudian menghuraikan rentetan ini ke dalam tatasusunan untuk langkah pemprosesan seterusnya.

Walau bagaimanapun, terdapat masalah tertentu dengan kaedah ini, seperti sekatan pada panjang parameter permintaan. Jadi kita perlu menggunakan cara yang lebih elegan: hantar tatasusunan terus ke bahagian belakang.

Kaedah 2: Gunakan formData untuk menyerahkan data

Kami boleh menggunakan objek FormData untuk menyerahkan permintaan jenis tatasusunan. FormData ialah objek terbina dalam yang disediakan oleh HTML5, yang boleh mengumpulkan data dalam bentuk ke dalam set data dalam bentuk nilai kunci. Mula-mula kita boleh mencipta objek FormData kosong, kemudian menambah setiap elemen dalam tatasusunan pada objek ini, dan akhirnya menghantar keseluruhan objek FormData ke bahagian belakang sebagai badan permintaan.

Contoh kod:

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

Dalam kod di atas, kami menambah id setiap item dalam tatasusunan senarai item pada objek FormData melalui gelung for, dan kemudian menggunakan keseluruhan objek sebagai permintaan Badan dihantar ke bahagian belakang. Selepas menerima permintaan, bahagian belakang menghuraikan secara langsung objek FormData untuk mendapatkan data jenis tatasusunan.

Ringkasan

Artikel ini memperkenalkan dua kaedah menyerahkan permintaan jenis tatasusunan dalam Vue, iaitu menyambung tatasusunan menjadi rentetan dan menggunakan FormData untuk menyerahkan data. Kedua-dua kaedah mempunyai senario yang boleh digunakan dalam pembangunan sebenar Kaedah yang mana untuk digunakan perlu dipilih mengikut keperluan tertentu. Saya harap artikel ini dapat membantu pembangun Vue yang mempelajari interaksi data bahagian hadapan dan belakang.

Atas ialah kandungan terperinci vue menyerahkan permintaan tatasusunan. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!