Comment passer un tableau au backend dans vue ? Présentation de la méthode

Vue, en tant que framework JavaScript populaire, a été largement utilisé dans le développement front-end. Dans Vue, lors du traitement des entrées de l'utilisateur frontal et de la soumission des données au backend, vous devez parfois transmettre un tableau au backend. Alors, comment y parvenir ?

1. JSON.stringify

Une méthode consiste à utiliser la méthode JSON.stringify() pour convertir le tableau en chaîne au format JSON, puis à envoyer la chaîne au backend.

Par exemple, dans Vue, si vous souhaitez envoyer un tableau nommé myArray au backend, vous pouvez écrire le code comme ceci :

methods: {
  postData: function () {
    const myArray = [1, 2, 3, 4, 5];
    const jsonData = JSON.stringify(myArray);
    axios.post('/post', jsonData)
      .then(response => {
        console.log(response);
      })
      .catch(error => {
        console.log(error);
      });
  }
}

Dans cet exemple, nous convertissons le tableau myArray via JSON.stringify() Chaîne au format JSON et envoyez-le sous forme de données au backend.

Bien entendu, cette méthode peut également être implémentée à l'aide d'autres bibliothèques de requêtes HTTP, telles que jQuery.ajax() ou XMLHttpRequest().

2. Utilisez formData

Une autre méthode consiste à utiliser l'objet FormData pour traiter les données du tableau. FormData est une API permettant de transmettre les données de formulaire sous forme de paires clé-valeur lors de l'envoi d'une requête HTTP.

Par exemple, dans Vue, vous pouvez écrire le code comme suit :

methods: {
  postData: function () {
    const myArray = [1, 2, 3, 4, 5];
    const formData = new FormData();
    for (let i = 0; i < myArray.length; i++) {
      formData.append(&#39;myArray[]&#39;, myArray[i]);
    }
    axios.post(&#39;/post&#39;, formData)
      .then(response => {
        console.log(response);
      })
      .catch(error => {
        console.log(error);
      });
  }
}

Dans cet exemple, nous utilisons l'objet FormData pour ajouter chaque élément du tableau à formData et le nommons 'myArray[]'. En effet, dans le backend, les données reçues seront un tableau et non une simple chaîne.

Cette méthode peut être utilisée non seulement pour les tableaux, mais également pour d'autres types de données complexes, tels que les téléchargements de fichiers et d'images.

En bref, quelle que soit la méthode adoptée, la méthode de réception du programme back-end doit être prise en considération. En utilisation réelle, la transmission de données peut devoir être mise en œuvre sur la base de différentes technologies back-end, et différentes technologies peuvent également avoir des exigences différentes en matière de format de données. De même, lorsque vous utilisez Vue, vous devez prendre en compte des problèmes tels que les différences entre les différentes versions et les interactions entre les composants.

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!