Le 14 septembre 2017, nous avons publié une version actualisée de notre Politique de confidentialité. En utilisant video2brain.com vous vous engagez à respecter ces documents mis à jour. Veuillez donc prendre quelques minutes pour les consulter.

JavaScript : JSON, AJAX et les requêtes asynchrones

Soumettre un formulaire avec AJAX

TESTEZ LINKEDIN LEARNING GRATUITEMENT ET SANS ENGAGEMENT

Tester maintenant Afficher tous les abonnements
Mettez en place un formulaire HTML simple et récupérez les valeurs. Puis, vous soumettrez ce formulaire.
05:28

Transcription

Alors, la soumission d'un formulaire n'est pas bien plus compliquée. Pour le moment, ce qu'on va faire, c'est qu'on va supprimer ici, la méthode « get » qu'on avait à cet endroit-là et puis, on va utiliser cette méthode-là, le « successCallback », on va le garder, on va l'avoir ici, ce que je vous conseille, c'est aussi de le mettre au-dessus, voilà, on va se créer le « successCallback » à cet endroit-là. Et puis, on va vérifier qu'il n'y a pas de soucis, ça continue à tourner, on a bien l'objet qui arrive et on va ici câbler maintenant un formulaire avec une méthode POST. Alors, dans la « div user » ici, on va se faire un « form », bien sûr, un « form », c'est un « form », comme ça. Qui va avoir un identifiant : « id » et puis, cet identifiant, ça va être tout simplement, par exemple, le « userForm » et on va se créer ici, des champs, alors, « input type= text » qui va avoir un « name », le « name » est important, donc on va faire par exemple, « first name » et puis, une valeur qu'on ne va pas mettre, évidement, parce qu'on a pas envie d'avoir la valeur et on va dupliquer ce champs deux ou trois fois, là, on va mettre « last name », là, on va mettre « age », pour le moment, c'est juste pour avoir des valeurs, bien sûr. Et ici, on va se mettre... on avait quoi, « age », on va regarder un petit peu ce qu'on a à l'intérieur de notre « user », on pourrait lui mettre, pourquoi pas, un sexe, par exemple. Donc, voilà, « sex ». Je vous conseille quand même d'avoir ici des « placeholder » à chaque fois, c'est plus sympa, votre prénom et puis ensuite, par exemple, votre nom. Ça, pour constituer un formulaire, c'est quand même plus joli quand on a des « placeholder », vous pouvez mettre des « labels » aussi, mais c'est vrai que les « placeholder », c'est pas mal. Ça fait un joli formulaire. Votre âge et enfin, ici, votre sexe, comme ça. Là, une fois que vous avez fait ça, vous avez un formulaire. Alors, on va évidement se faire un bouton de type ici « submit », alors vous pouvez aussi utiliser, bien évidement, « button » comme ça et tabulation et « type= submit » et là, on va dire Envoyer. En faisant ça, vous avez créé un formulaire avec un identifiant. Ce qui faudrait, ce serait déclencher la requête qui serait une requête POST sur l'URL que vous voulez, au moment où vous allez Soumettre. Pour faire ça, en fait, il va falloir câbler la soumission du formulaire et il faut d'abord se mettre de côté, avec «jquery », notre élément. Donc, on va mettre « var form », ici, une « var form » qui va être égale à « jquery », comme ça et on va aller chercher notre formulaire avec l'identifiant « userForm » qui se trouve ici et on va simplement lui dire, ici, d'envoyer cette requête quand le formulaire a été soumis. Alors, le mieux, pour faire ça, c'est de garder toutes les options qu'on a ici et de faire un « form.onsubmit » et derrière, on va simplement lui mettre une fonction de « Callback », donc juste une petite fonction anonyme, comme ça. Qui va nous permettre de travailler et de lui dire : « tu vas soumettre les informations. » Alors, le problème, c'est que on va avoir de la data. Et la data, on va l'ajouter au « getOptions ». Ce que je vous conseille, ici, c'est de faire un, comme ça, « getOptions.data = » et on va récupérer le formulaire, le formulaire, ça va être égal à 10 et on va faire « serialize ». Alors, « serialize », ça va vous permettre de récupérer toutes les valeurs du formulaire, de les sérialiser et de les envoyer dans la requête. On va, du coup, enregistrer cette partie-là, recharger et puis, on va simplement mettre des informations ici et faire « Envoyer ». Alors, vous allez voir, c'est un peu embêtant, pourquoi ? Parce que, ici, ça va recharger la page, ce que vous pouvez faire, c'est mettre un E à cet endroit-là qui va représenter l'évènement actuel et faire un « e.preventDefault » qui vous permet d'annuler le comportement par défaut d'un formulaire c'est-à-dire, le rechargement de la page. Voyez que là, c'est super, ça va fonctionner tout seul. Maintenant, vous allez remplir ce que vous voulez, vous allez envoyer, la requête va se faire, il n'y a pas de chargement de page, rien du tout. On va regarder tout ce qui s'est passé dans le « Network » parce que c'est ça qui va nous intéresser. Ici, on est allé faire un POST sur cette URL et regardez : on a envoyé toutes les données ! Et là, vous venez de mettre en place un formulaire que vous pouvez travailler facilement, avec lequel vous allez récupérer les informations et les soumettre. C'est des « Form Data » qui va être envoyé sur le serveur, évidement, après, il va falloir travailler ça pour que ça fonctionne proprement, que ça vide les champs, que les champs puissent être en erreur, etc. Vous pouvez vous baser sur HTML 5 pour faire de la validation mais, vous avez vu que soumettre un formulaire vers une URL en Ajax, ce n'est pas compliqué, il suffit d'utiliser la méthode POST. Il suffit aussi de passer les données, donc il faut passer les datas qu'on aurait pu passer ici, mais c'est mieux de les passer là parce que vous êtes dans l'évènement « submit » du formulaire, vous récupérez le formulaire, vous pouvez sérialiser les données et du coup, vous allez pouvoir les ajouter aux options du formulaire et comme ça, vous pouvez faire ce que vous voulez parce que « getOptions », c'est ici un objet et cet objet peut avoir d'autres propriétés, vous pouvez agir dessus. Voilà comment on soumet un formulaire, ce n'est pas très compliqué et puis, c'est très rapide à faire au niveau du code parce qu'il y a très peu de lignes et ça nous permet surtout d'avoir, ici, différentes informations qui sont soumises. Attention cependant, quand vous utilisez la méthode « Serialize » qui se trouve ici elle se base sur ce que vous mettez dans les « name », au niveau des propriétés. Si par exemple, vous attendez pas ces valeurs-là, en face, sur le serveur, faudra les changer.

JavaScript : JSON, AJAX et les requêtes asynchrones

Découvrez les requêtes asynchrones en Javascript avec le format JSON et la norme AJAX. Assimilez les techniques du développement d’applications web en single-page.

2h03 (30 vidéos)
Aucun commentaire n´est disponible actuellement
 

Votre formation est disponible en ligne avec option de téléchargement. Bonne nouvelle : vous ne devez pas choisir entre les deux. Dès que vous achetez une formation, vous disposez des deux options de consultation !

Le téléchargement vous permet de consulter la formation hors ligne et offre une interface plus conviviale. Si vous travaillez sur différents ordinateurs ou que vous ne voulez pas regarder la formation en une seule fois, connectez-vous sur cette page pour consulter en ligne les vidéos de la formation. Nous vous souhaitons un excellent apprentissage avec cette formation vidéo.

N'hésitez pas à nous contacter si vous avez des questions !