vue soumet une requête de tableau

Avec le développement rapide du développement front-end, de plus en plus de projets adoptent la méthode de développement de séparation front-end et back-end. Dans ce mode, le front-end est responsable du rendu des vues, de la logique d'interaction et d'autres traitements, tandis que le back-end est responsable de la fourniture des données. L'interaction des données entre le front-end et le back-end prend généralement la forme d'appels d'interface.

Dans le développement réel, nous devons souvent soumettre des données de type tableau. Par exemple, si l'utilisateur sélectionne plusieurs produits à régler, un tableau de listes de produits sera formé et ce tableau devra être soumis au backend pour traitement. Dans Vue, comment soumettre une requête de type tableau ? Ci-dessous, nous présenterons deux méthodes.

Méthode 1 : Splice le tableau en une chaîne

Nous pouvons diviser le tableau en une chaîne selon un certain format, puis envoyer cette chaîne en tant que paramètre de requête au back-end. Une fois que le backend a reçu la requête, il analyse la chaîne dans un tableau pour traitement.

Exemple de code :

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

Dans le code ci-dessus, nous utilisons une boucle for pour diviser l'identifiant de chaque produit dans le tableau de la liste de produits en une chaîne, et enfin en tant que paramètres sont soumis au backend. Le backend analyse ensuite cette chaîne dans un tableau pour l'étape suivante du traitement.

Cependant, cette méthode présente certains problèmes, tels que des restrictions sur la longueur des paramètres de requête. Nous devons donc utiliser une manière plus élégante : envoyer le tableau directement au backend.

Méthode 2 : Utilisez formData pour soumettre des données

Nous pouvons utiliser l'objet FormData pour soumettre des requêtes de type tableau. FormData est un objet intégré fourni par HTML5 qui peut assembler les données du formulaire en un ensemble de données sous forme de valeur-clé. Nous pouvons d'abord créer un objet FormData vide, puis ajouter chaque élément du tableau à cet objet et enfin envoyer l'intégralité de l'objet FormData au backend en tant que corps de la requête.

Exemple de code :

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

Dans le code ci-dessus, nous ajoutons l'identifiant de chaque élément du tableau de liste d'éléments à l'objet FormData via une boucle for, puis ajoutons The l'objet entier est envoyé au backend en tant que corps de la requête. Après avoir reçu la requête, le backend analyse directement l'objet FormData pour obtenir des données de type tableau.

Summary

Cet article présente deux méthodes de soumission de requêtes de type tableau dans Vue, qui consistent à concaténer des tableaux en chaînes et à utiliser FormData pour soumettre des données. Les deux méthodes ont leurs scénarios applicables dans le développement réel. La méthode à utiliser doit être choisie en fonction des besoins spécifiques. J'espère que cet article pourra être utile aux développeurs Vue qui apprennent l'interaction des données front-end et back-end.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!