[Vue.js] Soumettre via Ajax un formulaire Symfony avec Vue-resource et un objet FormData

Publié le 23/04/2019 • Actualisé le 20/04/2020

[Maj 18/04/2020] Vue-resource n'est plus maintenu, merci d'utiliser une librairie tierce comme Axios.
On a parfois besoin de soumettre manuellement un formulaire via Ajax. Pour ce faire nous devons récupérer toutes les valeurs des champs composant ce formulaire et effectuer une soumission manuelle comme si un utilisateur avait cliqué sur le bouton de validation. Voilà la manière la plus simple que j'ai trouvé d'y arriver en utilisant le client HTTP vue-resource et un objet JavaScript FormData. Le principal avantage ici est de ne pas avoir à construire les données manuellement ni d'avoir à faire de boucles inutiles. Ouvrez votre console JavaScript afin de voir le contenu de response.body.functions.

---

/* global post13 */
/**
 * J'utilise un module JavaScript afin d'isoler chaque snippet dans un fichier.
 * C'est en fait un mixin Vue.js. Utilisez le code appelé par la fonction mounted()
 * ou snippetXX().
 */
export default {
  data: {
    post13: post13 // same data as the post n°13
  },
  methods: {
    snippet22: function () {
      const formData = new FormData()
      formData.append('uri', this.post13.uri)
      this.$http.post(this.post13.refreshPath, formData).then(response => {
        console.log(response.body.functions)
      })
      // That's it! 😁
    }
  },
  mounted () {
    if (this.isArticle(22)) {
      this.snippet22()
    }
  }
}

 Plus sur Stackoverflow  Snippet aléatoire

  Travaillez avec moi !

---