Connexion
S'inscrire
Actualités
Quoi de neuf
Activités générales
Auteurs
Forums
Nouveaux messages
Rechercher un forum
Quoi de neuf
Nouveaux messages
Nouveaux messages de profil
Activités générales
Membres
Membres inscrits
Visiteurs actuels
Nouveaux messages de profil
Rechercher dans les messages des profils
Teams
Créé ton équipe
Quoi de neuf ?
Nouveaux messages
Rechercher un forum
Menu
Connexion
S'inscrire
Install the app
Install
Forums
Forums généraux
Informatique
Développement
TUTO JS | Envoyer un formulaire sans rafraîchir la page
JavaScript is disabled. For a better experience, please enable JavaScript in your browser before proceeding.
Vous utilisez un navigateur non à jour ou ancien. Il ne peut pas afficher ce site ou d'autres sites correctement.
Vous devez le mettre à jour ou utiliser un
navigateur alternatif
.
Répondre à la discussion
Message
<blockquote data-quote="WhiiTe'" data-source="post: 6975021" data-attributes="member: 8987"><p>Bonjour à tous,</p><p></p><p style="text-align: center">Dans ce tutoriel je vais vous apprendre à manier l'<strong><span style="color: #eb1d1d">A</span><span style="color: #da1e1e">j</span><span style="color: #ca1f1f">a</span><span style="color: #b91f1f">x</span></strong> (acronyme d'Asynchronous JAvascript and Xml) et l'utiliser dans un cas concret.</p> <p style="text-align: center">Nous allons donc faire <strong><span style="color: #eb1d1d">un </span><span style="color: #e01e1e">fo</span><span style="color: #d51e1e">rm</span><span style="color: #ca1f1f">ul</span><span style="color: #be1f1f">ai</span><span style="color: #b32020">re</span></strong> qui envoie les données soumises <strong><span style="color: #eb1d1d">san</span><span style="color: #e11d1d">s ra</span><span style="color: #d71e1e">fra</span><span style="color: #cd1e1e">îch</span><span style="color: #c31f1f">ir l</span><span style="color: #b91f1f">a pa</span><span style="color: #af2020">ge</span></strong>, et bien sûr en affichant les erreurs s'il devait y en avoir, tout le code sera sur la même page.</p> <p style="text-align: center"></p> <p style="text-align: center">De minimes bases sont requises en <strong><span style="color: #eb1d1d">P</span><span style="color: #d51e1e">H</span><span style="color: #be1f1f">P</span></strong> et en <strong><span style="color: #eb1d1d">Ja</span><span style="color: #de1e1e">va</span><span style="color: #d01e1e">sc</span><span style="color: #c31f1f">ri</span><span style="color: #b51f1f">pt</span></strong> pour suivre le tutoriel.</p> <p style="text-align: center"></p> <p style="text-align: center">Avant de commencer sachez que je ne suis pas un <strong><span style="color: #eb1d1d">prof</span><span style="color: #e01d1d">ess</span><span style="color: #d81e1e">ionn</span><span style="color: #ce1e1e">el e</span><span style="color: #c51f1f">n Jav</span><span style="color: #bb1f1f">asc</span><span style="color: #b32020">ript</span></strong>, si je fais une erreur ou si vous avez de meilleure façon de faire les choses dîtes-le moi en commentaire.</p> <p style="text-align: center"></p> <p style="text-align: center">Pour commencer nous allons créer <strong><span style="color: #eb1d1d">la </span><span style="color: #e11d1d">ba</span><span style="color: #d81e1e">se </span><span style="color: #ce1e1e">de </span><span style="color: #c51f1f">la </span><span style="color: #bb1f1f">pa</span><span style="color: #b22020">ge</span></strong>, c'est à dire le formulaire, et en-dessous nous allons préparer le script.</p><p></p><p>[HTML]</p><p><!DOCTYPE html></p><p><html></p><p> <head></p><p> <meta charset="utf-8"></p><p> <title>Ajax Form</title></p><p> </head></p><p> <body></p><p> <form method="POST"></p><p> <label for="field1">Champs 1 </label><input type="text" id="field1"></p><p> <br /></p><p> <label for="field2">Champs 2 </label><input type="text" id="field2"></p><p> <br /></p><p> <label for="field3">Champs 3 </label><input type="text" id="field3"></p><p> <br /></p><p> <input type="submit" id="submit"></p><p> </form></p><p></p><p> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script></p><p> <script></p><p> $(document).ready(function(){</p><p></p><p> });</p><p> </script></p><p> </body></p><p></html></p><p>[/HTML]</p><p></p><p style="text-align: center">Nommez vos champs comme vous le souhaitez, je vous conseille pour commencer de faire comme moi et par la suite de <strong><span style="color: #eb1d1d">mo</span><span style="color: #e11d1d">di</span><span style="color: #d81e1e">fi</span><span style="color: #ce1e1e">er </span><span style="color: #c51f1f">le </span><span style="color: #bb1f1f">co</span><span style="color: #b22020">de</span></strong> afin d'obtenir ce que vous vouliez à la base.</p> <p style="text-align: center"></p> <p style="text-align: center">Là nous avons notre formulaire avec trois champs qui ont un ID différent, dans notre cas, il est important de mettre des <strong><span style="color: #eb1d1d">ID</span><span style="color: #e11d1d">s d</span><span style="color: #d61e1e">if</span><span style="color: #cc1e1e">fé</span><span style="color: #c21f1f">re</span><span style="color: #b71f1f">nt</span><span style="color: #ad2020">s</span></strong> à ce que vous voulez manipuler, sinon vous aurez de forte chance d'avoir un code bugué.</p> <p style="text-align: center"></p> <p style="text-align: center">Maintenant passons au script.</p><p></p><p>[CODE]</p><p>$('#submit').on('click', function(e){</p><p> e.preventDefault();</p><p> var field1 = $('#field1').val();</p><p> var field2 = $('#field2').val();</p><p> var field3 = $('#field3').val();</p><p> // Suite du code</p><p>});</p><p>[/CODE]</p><p></p><p style="text-align: center">Mettez ça dans le début du script que vous avez, ici nous disons qu'<strong><span style="color: #eb1d1d">au c</span><span style="color: #e01d1d">liq</span><span style="color: #d61e1e">ue d</span><span style="color: #cb1e1e">e l’</span><span style="color: #c11f1f">élé</span><span style="color: #b61f1f">men</span><span style="color: #ac2020">t</span></strong> qui a comme id submit, on initie les variables <strong><span style="color: #eb1d1d">fie</span><span style="color: #e11d1d">ld1</span><span style="color: #d81e1e">, fi</span><span style="color: #ce1e1e">eld</span><span style="color: #c51f1f">2 et </span><span style="color: #bb1f1f">fie</span><span style="color: #b22020">ld3</span></strong> et on leur donne les valeurs des inputs, lisez bien le code vous devriez comprendre rien qu'avec ça que c'est très simple !</p> <p style="text-align: center"></p> <p style="text-align: center">Maintenant il faut envoyer en <strong><span style="color: #eb1d1d">A</span><span style="color: #da1e1e">j</span><span style="color: #ca1f1f">a</span><span style="color: #b91f1f">x</span></strong> les valeurs !</p><p></p><p>[CODE]</p><p>$.ajax({</p><p> url: 'index.php',</p><p> type: 'POST',</p><p> data:{</p><p> field1:field1,</p><p> field2:field2,</p><p> field3:field3,</p><p> }</p><p>}).done(function(a){</p><p>// code de la réponse</p><p>});</p><p>[/CODE]</p><p></p><p style="text-align: center">Mettez ça à la suite du code.</p> <p style="text-align: center">Vous pouvez apercevoir qu'il y a quelques <strong><span style="color: #eb1d1d">par</span><span style="color: #e01d1d">amè</span><span style="color: #d61e1e">tre</span><span style="color: #cb1e1e">s de </span><span style="color: #c11f1f">déf</span><span style="color: #b61f1f">ini</span><span style="color: #ac2020">s</span></strong>, comme l'URL, le type, ou même DATA, ce sont des paramètres qu'utilise jQuery pour <strong><span style="color: #eb1d1d">env</span><span style="color: #e11d1d">oye</span><span style="color: #d71e1e">r la </span><span style="color: #cd1e1e">req</span><span style="color: #c31f1f">uêt</span><span style="color: #b91f1f">e Aj</span><span style="color: #af2020">ax</span></strong>.</p> <p style="text-align: center">Il y a d'autres paramètres, comme dataType, success, error, beforeSend etc.. je vous laisse vous renseigner sur le net.</p> <p style="text-align: center"></p> <p style="text-align: center">Remplacez index.php par la page dans laquelle vous comptez mettre <strong><span style="color: #eb1d1d">vo</span><span style="color: #e01e1e">tr</span><span style="color: #d51e1e">e c</span><span style="color: #ca1f1f">od</span><span style="color: #be1f1f">e P</span><span style="color: #b32020">HP</span></strong>, je vais mettre tout mon code dans un fichier donc je laisse index.php.</p> <p style="text-align: center"></p> <p style="text-align: center">En PHP nous allons rendre un <strong><span style="color: #eb1d1d">ta</span><span style="color: #df1e1e">bl</span><span style="color: #d31e1e">ea</span><span style="color: #c61f1f">u J</span><span style="color: #ba1f1f">SO</span><span style="color: #ae2020">N</span></strong> (JavaScript Object Notation), il faut donc <strong><span style="color: #eb1d1d">p</span><span style="color: #e01e1e">a</span><span style="color: #d51e1e">r</span><span style="color: #ca1f1f">s</span><span style="color: #be1f1f">e</span><span style="color: #b32020">r</span></strong> ce tableau afin d'afficher la réponse, mettez ce code dans le .done(function ....</p><p></p><p>[CODE]</p><p> var response = JSON.parse(a);</p><p> $.each(response, function(index, value){</p><p> alert(response.response);</p><p> });</p><p>[/CODE]</p><p></p><p style="text-align: center">Le alert(response.response) permettra juste d'afficher une pop-up avec <strong><span style="color: #eb1d1d">le m</span><span style="color: #e01d1d">ess</span><span style="color: #d61e1e">age </span><span style="color: #cb1e1e">ren</span><span style="color: #c11f1f">du e</span><span style="color: #b61f1f">n PH</span><span style="color: #ac2020">P</span></strong>.</p> <p style="text-align: center"></p> <p style="text-align: center">Place au PHP désormais, rendez-vous tout en haut de votre code, il faut vérifier si on a bien <strong><span style="color: #eb1d1d">les </span><span style="color: #df1e1e">val</span><span style="color: #d31e1e">eur</span><span style="color: #c81f1f">s vo</span><span style="color: #bc1f1f">ulu</span><span style="color: #b02020">es</span></strong>. (les field1 etc..).</p><p></p><p>[PHP]</p><p>if(isset($_POST['field1']) && isset($_POST['field2']) && isset($_POST['field3']))</p><p>{</p><p> $field1 = htmlspecialchars(trim($_POST['field1']));</p><p> $field2 = htmlspecialchars(trim($_POST['field2']));</p><p> $field3 = htmlspecialchars(trim($_POST['field3']));</p><p># la suite</p><p>}</p><p>[/PHP]</p><p></p><p style="text-align: center">Nous n'avons quasiment plus rien à faire, avant de faire quoique ce soit nous allons faire un petit test, on va <strong><span style="color: #eb1d1d">ren</span><span style="color: #e01d1d">dre </span><span style="color: #d61e1e">un t</span><span style="color: #cb1e1e">abl</span><span style="color: #c11f1f">eau </span><span style="color: #b61f1f">JSO</span><span style="color: #ac2020">N</span></strong> et lorsqu'on va soumettre le formulaire, le message va s'afficher dans une pop-up.</p> <p style="text-align: center"></p> <p style="text-align: center">Mettez à la suite du PHP, ce petit bout de code.</p><p></p><p>[PHP]die(json_encode(array('response' => "Hello World !")));[/PHP]</p><p style="text-align: center"></p> <p style="text-align: center">Si je fais un die c'est pour que le script s'arrête, si je n'en mettais pas le script aurait continué et il nous aurait sorti <strong><span style="color: #eb1d1d">le c</span><span style="color: #e11d1d">ont</span><span style="color: #d81e1e">enu </span><span style="color: #ce1e1e">de l</span><span style="color: #c51f1f">a pa</span><span style="color: #bb1f1f">ge H</span><span style="color: #b22020">TML</span></strong>.</p> <p style="text-align: center">Soumettez le formulaire et regardez ce qu'il se passe, magique non ? <img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" class="smilie smilie--sprite smilie--sprite355" alt=":)" title=":) :)" loading="lazy" data-shortname=":)" /></p> <p style="text-align: center"></p> <p style="text-align: center"><img src="https://i.gyazo.com/3f1e907a8f68312c8424eceb7f55a8fa.gif" alt="" class="fr-fic fr-dii fr-draggable " style="" /></p> <p style="text-align: center"></p> <p style="text-align: center">Je trouve que mettre cette ligne à chaque fois qu'on veut rendre un message <strong><span style="color: #eb1d1d">n'</span><span style="color: #e11d1d">es</span><span style="color: #d81e1e">t p</span><span style="color: #ce1e1e">as </span><span style="color: #c51f1f">pr</span><span style="color: #bb1f1f">op</span><span style="color: #b22020">re</span></strong>, personnellement j'utilise toujours la <strong><span style="color: #eb1d1d">P</span><span style="color: #d51e1e">O</span><span style="color: #be1f1f">O</span></strong>, donc je me fais des fonctions qui me permettent d'avoir du code plus propre et moins bordélique.</p> <p style="text-align: center"></p> <p style="text-align: center">On peut bien sûr faire une fonction sans utiliser la POO. Voici un exemple.</p><p></p><p>[PHP]</p><p>function renderJson($index, $value){</p><p> return json_encode(array($index => $value));</p><p>}</p><p>[/PHP]</p><p></p><p style="text-align: center">Pour utiliser la <strong><span style="color: #eb1d1d">fo</span><span style="color: #da1e1e">nc</span><span style="color: #ca1f1f">ti</span><span style="color: #b91f1f">o</span><span style="color: #b02020">n</span></strong> il suffit mettre de faire :</p><p></p><p>[PHP]</p><p>die(renderJson('response', 'Hello world !'));</p><p>[/PHP]</p><p></p><p style="text-align: center">Attention ! Si vous mettez en premier paramètre de votre fonction quelque chose de <strong><span style="color: #eb1d1d">di</span><span style="color: #dc1e1e">ff</span><span style="color: #cd1e1e">ér</span><span style="color: #be1f1f">en</span><span style="color: #af2020">t</span></strong> du Js, le code affichera <strong><span style="color: #eb1d1d">un</span><span style="color: #dc1e1e">de</span><span style="color: #cd1e1e">fi</span><span style="color: #be1f1f">ne</span><span style="color: #af2020">d</span></strong>.</p><p></p><p>[CODE]</p><p>die(renderJson('x', 'Hey')); # PHP</p><p>alert(x.test); // Js</p><p></p><p>// x doit être identique aux deux endroits</p><p>[/CODE]</p><p></p><p style="text-align: center">Je me suis peut-être mal exprimé, j'espère que ce petit bout de code ci-dessous vous fera <strong><span style="color: #eb1d1d">co</span><span style="color: #de1e1e">mp</span><span style="color: #d01e1e">re</span><span style="color: #c31f1f">nd</span><span style="color: #b51f1f">re</span></strong>.</p> <p style="text-align: center"></p> <p style="text-align: center">Maintenant nous allons afficher le message sur notre page, en utilisant</p> <p style="text-align: center"><strong><span style="color: #eb1d1d">j</span><span style="color: #e01e1e">Q</span><span style="color: #d51e1e">u</span><span style="color: #ca1f1f">e</span><span style="color: #be1f1f">r</span><span style="color: #b32020">y</span></strong>.</p> <p style="text-align: center"></p> <p style="text-align: center">Sous le formulaire créez une DIV avec l'ID de votre choix, et dans le JavaScript, puis dans le <strong><span style="color: #eb1d1d">$.ea</span><span style="color: #df1e1e">ch, e</span><span style="color: #d41e1e">nlev</span><span style="color: #c81f1f">ez le </span><span style="color: #bc1f1f">aler</span><span style="color: #b12020">t()</span></strong> et mettez cette ligne.</p><p></p><p>[CODE]$('#votreDiv').append(response.response);[/CODE]</p><p style="text-align: center"></p> <p style="text-align: center">Vous devriez avoir ça comme <strong><span style="color: #eb1d1d">r</span><span style="color: #de1e1e">e</span><span style="color: #d01e1e">n</span><span style="color: #c31f1f">d</span><span style="color: #b51f1f">u</span></strong> :</p> <p style="text-align: center"></p> <p style="text-align: center"><img src="https://i.gyazo.com/0620acf3a986a593ea420197fa329341.gif" alt="" class="fr-fic fr-dii fr-draggable " style="" /></p> <p style="text-align: center"></p> <p style="text-align: center">Ce n'est pas tout à fait ce que l'on voulait, pour "patcher" ça mettez là où <strong><span style="color: #eb1d1d">vous dé</span><span style="color: #e01d1d">finis</span><span style="color: #d81e1e">sez les </span><span style="color: #cd1e1e">varia</span><span style="color: #c41f1f">bles en </span><span style="color: #ba1f1f">JavaS</span><span style="color: #b12020">cript</span></strong> ce petit bout de code qui va vider la DIV à chaque soumission du formulaire.</p><p></p><p>[CODE]$('#response').html('');[/CODE]</p><p></p><p style="text-align: center">Et maintenant <strong><span style="color: #eb1d1d">pl</span><span style="color: #e11d1d">us </span><span style="color: #d81e1e">de </span><span style="color: #ce1e1e">pr</span><span style="color: #c51f1f">ob</span><span style="color: #bb1f1f">lè</span><span style="color: #b22020">me</span></strong> !</p> <p style="text-align: center"></p> <p style="text-align: center">Cela rend très bien sur les sites, c'est <strong><span style="color: #eb1d1d">f</span><span style="color: #e01e1e">l</span><span style="color: #d51e1e">u</span><span style="color: #ca1f1f">i</span><span style="color: #be1f1f">d</span><span style="color: #b32020">e</span></strong> et plus <strong><span style="color: #eb1d1d">pr</span><span style="color: #e11d1d">of</span><span style="color: #d61e1e">es</span><span style="color: #cc1e1e">si</span><span style="color: #c21f1f">on</span><span style="color: #b71f1f">ne</span><span style="color: #ad2020">l</span></strong> !</p> <p style="text-align: center"></p> <p style="text-align: center">Et voilà <img src="/images/smileys/smiley-rg.svg" class="smilie" loading="lazy" alt=":RG:" title="RG :RG:" data-shortname=":RG:" /> c'est la fin de ce tutoriel, si vous avez des questions n'hésitez pas à me MP ou à les poser dans les commentaires pour que d'autres personnes <strong><span style="color: #eb1d1d">pui</span><span style="color: #e11d1d">sse</span><span style="color: #d71e1e">nt v</span><span style="color: #cd1e1e">ous </span><span style="color: #c31f1f">rép</span><span style="color: #b91f1f">ond</span><span style="color: #af2020">re</span></strong>.</p> <p style="text-align: center"></p> <p style="text-align: center"><img src="/data/assets/smilies/tchuss.gif" class="smilie" loading="lazy" alt=":tchuss:" title="Tchuss :tchuss:" data-shortname=":tchuss:" /></p></blockquote><p></p>
[QUOTE="WhiiTe', post: 6975021, member: 8987"] Bonjour à tous, [CENTER]Dans ce tutoriel je vais vous apprendre à manier l'[B][COLOR=#eb1d1d]A[/COLOR][COLOR=#da1e1e]j[/COLOR][COLOR=#ca1f1f]a[/COLOR][COLOR=#b91f1f]x[/COLOR][/B] (acronyme d'Asynchronous JAvascript and Xml) et l'utiliser dans un cas concret. Nous allons donc faire [B][COLOR=#eb1d1d]un [/COLOR][COLOR=#e01e1e]fo[/COLOR][COLOR=#d51e1e]rm[/COLOR][COLOR=#ca1f1f]ul[/COLOR][COLOR=#be1f1f]ai[/COLOR][COLOR=#b32020]re[/COLOR][/B] qui envoie les données soumises [B][COLOR=#eb1d1d]san[/COLOR][COLOR=#e11d1d]s ra[/COLOR][COLOR=#d71e1e]fra[/COLOR][COLOR=#cd1e1e]îch[/COLOR][COLOR=#c31f1f]ir l[/COLOR][COLOR=#b91f1f]a pa[/COLOR][COLOR=#af2020]ge[/COLOR][/B], et bien sûr en affichant les erreurs s'il devait y en avoir, tout le code sera sur la même page. De minimes bases sont requises en [B][COLOR=#eb1d1d]P[/COLOR][COLOR=#d51e1e]H[/COLOR][COLOR=#be1f1f]P[/COLOR][/B] et en [B][COLOR=#eb1d1d]Ja[/COLOR][COLOR=#de1e1e]va[/COLOR][COLOR=#d01e1e]sc[/COLOR][COLOR=#c31f1f]ri[/COLOR][COLOR=#b51f1f]pt[/COLOR][/B] pour suivre le tutoriel. Avant de commencer sachez que je ne suis pas un [B][COLOR=#eb1d1d]prof[/COLOR][COLOR=#e01d1d]ess[/COLOR][COLOR=#d81e1e]ionn[/COLOR][COLOR=#ce1e1e]el e[/COLOR][COLOR=#c51f1f]n Jav[/COLOR][COLOR=#bb1f1f]asc[/COLOR][COLOR=#b32020]ript[/COLOR][/B], si je fais une erreur ou si vous avez de meilleure façon de faire les choses dîtes-le moi en commentaire. Pour commencer nous allons créer [B][COLOR=#eb1d1d]la [/COLOR][COLOR=#e11d1d]ba[/COLOR][COLOR=#d81e1e]se [/COLOR][COLOR=#ce1e1e]de [/COLOR][COLOR=#c51f1f]la [/COLOR][COLOR=#bb1f1f]pa[/COLOR][COLOR=#b22020]ge[/COLOR][/B], c'est à dire le formulaire, et en-dessous nous allons préparer le script.[/CENTER] [HTML] <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Ajax Form</title> </head> <body> <form method="POST"> <label for="field1">Champs 1 </label><input type="text" id="field1"> <br /> <label for="field2">Champs 2 </label><input type="text" id="field2"> <br /> <label for="field3">Champs 3 </label><input type="text" id="field3"> <br /> <input type="submit" id="submit"> </form> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script> <script> $(document).ready(function(){ }); </script> </body> </html> [/HTML] [CENTER]Nommez vos champs comme vous le souhaitez, je vous conseille pour commencer de faire comme moi et par la suite de [B][COLOR=#eb1d1d]mo[/COLOR][COLOR=#e11d1d]di[/COLOR][COLOR=#d81e1e]fi[/COLOR][COLOR=#ce1e1e]er [/COLOR][COLOR=#c51f1f]le [/COLOR][COLOR=#bb1f1f]co[/COLOR][COLOR=#b22020]de[/COLOR][/B] afin d'obtenir ce que vous vouliez à la base. Là nous avons notre formulaire avec trois champs qui ont un ID différent, dans notre cas, il est important de mettre des [B][COLOR=#eb1d1d]ID[/COLOR][COLOR=#e11d1d]s d[/COLOR][COLOR=#d61e1e]if[/COLOR][COLOR=#cc1e1e]fé[/COLOR][COLOR=#c21f1f]re[/COLOR][COLOR=#b71f1f]nt[/COLOR][COLOR=#ad2020]s[/COLOR][/B] à ce que vous voulez manipuler, sinon vous aurez de forte chance d'avoir un code bugué. Maintenant passons au script.[/CENTER] [CODE] $('#submit').on('click', function(e){ e.preventDefault(); var field1 = $('#field1').val(); var field2 = $('#field2').val(); var field3 = $('#field3').val(); // Suite du code }); [/CODE] [CENTER]Mettez ça dans le début du script que vous avez, ici nous disons qu'[B][COLOR=#eb1d1d]au c[/COLOR][COLOR=#e01d1d]liq[/COLOR][COLOR=#d61e1e]ue d[/COLOR][COLOR=#cb1e1e]e l’[/COLOR][COLOR=#c11f1f]élé[/COLOR][COLOR=#b61f1f]men[/COLOR][COLOR=#ac2020]t[/COLOR][/B] qui a comme id submit, on initie les variables [B][COLOR=#eb1d1d]fie[/COLOR][COLOR=#e11d1d]ld1[/COLOR][COLOR=#d81e1e], fi[/COLOR][COLOR=#ce1e1e]eld[/COLOR][COLOR=#c51f1f]2 et [/COLOR][COLOR=#bb1f1f]fie[/COLOR][COLOR=#b22020]ld3[/COLOR][/B] et on leur donne les valeurs des inputs, lisez bien le code vous devriez comprendre rien qu'avec ça que c'est très simple ! Maintenant il faut envoyer en [B][COLOR=#eb1d1d]A[/COLOR][COLOR=#da1e1e]j[/COLOR][COLOR=#ca1f1f]a[/COLOR][COLOR=#b91f1f]x[/COLOR][/B] les valeurs ![/CENTER] [CODE] $.ajax({ url: 'index.php', type: 'POST', data:{ field1:field1, field2:field2, field3:field3, } }).done(function(a){ // code de la réponse }); [/CODE] [CENTER]Mettez ça à la suite du code. Vous pouvez apercevoir qu'il y a quelques [B][COLOR=#eb1d1d]par[/COLOR][COLOR=#e01d1d]amè[/COLOR][COLOR=#d61e1e]tre[/COLOR][COLOR=#cb1e1e]s de [/COLOR][COLOR=#c11f1f]déf[/COLOR][COLOR=#b61f1f]ini[/COLOR][COLOR=#ac2020]s[/COLOR][/B], comme l'URL, le type, ou même DATA, ce sont des paramètres qu'utilise jQuery pour [B][COLOR=#eb1d1d]env[/COLOR][COLOR=#e11d1d]oye[/COLOR][COLOR=#d71e1e]r la [/COLOR][COLOR=#cd1e1e]req[/COLOR][COLOR=#c31f1f]uêt[/COLOR][COLOR=#b91f1f]e Aj[/COLOR][COLOR=#af2020]ax[/COLOR][/B]. Il y a d'autres paramètres, comme dataType, success, error, beforeSend etc.. je vous laisse vous renseigner sur le net. Remplacez index.php par la page dans laquelle vous comptez mettre [B][COLOR=#eb1d1d]vo[/COLOR][COLOR=#e01e1e]tr[/COLOR][COLOR=#d51e1e]e c[/COLOR][COLOR=#ca1f1f]od[/COLOR][COLOR=#be1f1f]e P[/COLOR][COLOR=#b32020]HP[/COLOR][/B], je vais mettre tout mon code dans un fichier donc je laisse index.php. En PHP nous allons rendre un [B][COLOR=#eb1d1d]ta[/COLOR][COLOR=#df1e1e]bl[/COLOR][COLOR=#d31e1e]ea[/COLOR][COLOR=#c61f1f]u J[/COLOR][COLOR=#ba1f1f]SO[/COLOR][COLOR=#ae2020]N[/COLOR][/B] (JavaScript Object Notation), il faut donc [B][COLOR=#eb1d1d]p[/COLOR][COLOR=#e01e1e]a[/COLOR][COLOR=#d51e1e]r[/COLOR][COLOR=#ca1f1f]s[/COLOR][COLOR=#be1f1f]e[/COLOR][COLOR=#b32020]r[/COLOR][/B] ce tableau afin d'afficher la réponse, mettez ce code dans le .done(function ....[/CENTER] [CODE] var response = JSON.parse(a); $.each(response, function(index, value){ alert(response.response); }); [/CODE] [CENTER]Le alert(response.response) permettra juste d'afficher une pop-up avec [B][COLOR=#eb1d1d]le m[/COLOR][COLOR=#e01d1d]ess[/COLOR][COLOR=#d61e1e]age [/COLOR][COLOR=#cb1e1e]ren[/COLOR][COLOR=#c11f1f]du e[/COLOR][COLOR=#b61f1f]n PH[/COLOR][COLOR=#ac2020]P[/COLOR][/B]. Place au PHP désormais, rendez-vous tout en haut de votre code, il faut vérifier si on a bien [B][COLOR=#eb1d1d]les [/COLOR][COLOR=#df1e1e]val[/COLOR][COLOR=#d31e1e]eur[/COLOR][COLOR=#c81f1f]s vo[/COLOR][COLOR=#bc1f1f]ulu[/COLOR][COLOR=#b02020]es[/COLOR][/B]. (les field1 etc..).[/CENTER] [PHP] if(isset($_POST['field1']) && isset($_POST['field2']) && isset($_POST['field3'])) { $field1 = htmlspecialchars(trim($_POST['field1'])); $field2 = htmlspecialchars(trim($_POST['field2'])); $field3 = htmlspecialchars(trim($_POST['field3'])); # la suite } [/PHP] [CENTER]Nous n'avons quasiment plus rien à faire, avant de faire quoique ce soit nous allons faire un petit test, on va [B][COLOR=#eb1d1d]ren[/COLOR][COLOR=#e01d1d]dre [/COLOR][COLOR=#d61e1e]un t[/COLOR][COLOR=#cb1e1e]abl[/COLOR][COLOR=#c11f1f]eau [/COLOR][COLOR=#b61f1f]JSO[/COLOR][COLOR=#ac2020]N[/COLOR][/B] et lorsqu'on va soumettre le formulaire, le message va s'afficher dans une pop-up. Mettez à la suite du PHP, ce petit bout de code.[/CENTER] [PHP]die(json_encode(array('response' => "Hello World !")));[/PHP] [CENTER] Si je fais un die c'est pour que le script s'arrête, si je n'en mettais pas le script aurait continué et il nous aurait sorti [B][COLOR=#eb1d1d]le c[/COLOR][COLOR=#e11d1d]ont[/COLOR][COLOR=#d81e1e]enu [/COLOR][COLOR=#ce1e1e]de l[/COLOR][COLOR=#c51f1f]a pa[/COLOR][COLOR=#bb1f1f]ge H[/COLOR][COLOR=#b22020]TML[/COLOR][/B]. Soumettez le formulaire et regardez ce qu'il se passe, magique non ? :) [IMG]https://i.gyazo.com/3f1e907a8f68312c8424eceb7f55a8fa.gif[/IMG] Je trouve que mettre cette ligne à chaque fois qu'on veut rendre un message [B][COLOR=#eb1d1d]n'[/COLOR][COLOR=#e11d1d]es[/COLOR][COLOR=#d81e1e]t p[/COLOR][COLOR=#ce1e1e]as [/COLOR][COLOR=#c51f1f]pr[/COLOR][COLOR=#bb1f1f]op[/COLOR][COLOR=#b22020]re[/COLOR][/B], personnellement j'utilise toujours la [B][COLOR=#eb1d1d]P[/COLOR][COLOR=#d51e1e]O[/COLOR][COLOR=#be1f1f]O[/COLOR][/B], donc je me fais des fonctions qui me permettent d'avoir du code plus propre et moins bordélique. On peut bien sûr faire une fonction sans utiliser la POO. Voici un exemple.[/CENTER] [PHP] function renderJson($index, $value){ return json_encode(array($index => $value)); } [/PHP] [CENTER]Pour utiliser la [B][COLOR=#eb1d1d]fo[/COLOR][COLOR=#da1e1e]nc[/COLOR][COLOR=#ca1f1f]ti[/COLOR][COLOR=#b91f1f]o[/COLOR][COLOR=#b02020]n[/COLOR][/B] il suffit mettre de faire :[/CENTER] [PHP] die(renderJson('response', 'Hello world !')); [/PHP] [CENTER]Attention ! Si vous mettez en premier paramètre de votre fonction quelque chose de [B][COLOR=#eb1d1d]di[/COLOR][COLOR=#dc1e1e]ff[/COLOR][COLOR=#cd1e1e]ér[/COLOR][COLOR=#be1f1f]en[/COLOR][COLOR=#af2020]t[/COLOR][/B] du Js, le code affichera [B][COLOR=#eb1d1d]un[/COLOR][COLOR=#dc1e1e]de[/COLOR][COLOR=#cd1e1e]fi[/COLOR][COLOR=#be1f1f]ne[/COLOR][COLOR=#af2020]d[/COLOR][/B].[/CENTER] [CODE] die(renderJson('x', 'Hey')); # PHP alert(x.test); // Js // x doit être identique aux deux endroits [/CODE] [CENTER]Je me suis peut-être mal exprimé, j'espère que ce petit bout de code ci-dessous vous fera [B][COLOR=#eb1d1d]co[/COLOR][COLOR=#de1e1e]mp[/COLOR][COLOR=#d01e1e]re[/COLOR][COLOR=#c31f1f]nd[/COLOR][COLOR=#b51f1f]re[/COLOR][/B]. Maintenant nous allons afficher le message sur notre page, en utilisant [B][COLOR=#eb1d1d]j[/COLOR][COLOR=#e01e1e]Q[/COLOR][COLOR=#d51e1e]u[/COLOR][COLOR=#ca1f1f]e[/COLOR][COLOR=#be1f1f]r[/COLOR][COLOR=#b32020]y[/COLOR][/B]. Sous le formulaire créez une DIV avec l'ID de votre choix, et dans le JavaScript, puis dans le [B][COLOR=#eb1d1d]$.ea[/COLOR][COLOR=#df1e1e]ch, e[/COLOR][COLOR=#d41e1e]nlev[/COLOR][COLOR=#c81f1f]ez le [/COLOR][COLOR=#bc1f1f]aler[/COLOR][COLOR=#b12020]t()[/COLOR][/B] et mettez cette ligne.[/CENTER] [CODE]$('#votreDiv').append(response.response);[/CODE] [CENTER] Vous devriez avoir ça comme [B][COLOR=#eb1d1d]r[/COLOR][COLOR=#de1e1e]e[/COLOR][COLOR=#d01e1e]n[/COLOR][COLOR=#c31f1f]d[/COLOR][COLOR=#b51f1f]u[/COLOR][/B] : [IMG]https://i.gyazo.com/0620acf3a986a593ea420197fa329341.gif[/IMG] Ce n'est pas tout à fait ce que l'on voulait, pour "patcher" ça mettez là où [B][COLOR=#eb1d1d]vous dé[/COLOR][COLOR=#e01d1d]finis[/COLOR][COLOR=#d81e1e]sez les [/COLOR][COLOR=#cd1e1e]varia[/COLOR][COLOR=#c41f1f]bles en [/COLOR][COLOR=#ba1f1f]JavaS[/COLOR][COLOR=#b12020]cript[/COLOR][/B] ce petit bout de code qui va vider la DIV à chaque soumission du formulaire.[/CENTER] [CODE]$('#response').html('');[/CODE] [CENTER]Et maintenant [B][COLOR=#eb1d1d]pl[/COLOR][COLOR=#e11d1d]us [/COLOR][COLOR=#d81e1e]de [/COLOR][COLOR=#ce1e1e]pr[/COLOR][COLOR=#c51f1f]ob[/COLOR][COLOR=#bb1f1f]lè[/COLOR][COLOR=#b22020]me[/COLOR][/B] ! Cela rend très bien sur les sites, c'est [B][COLOR=#eb1d1d]f[/COLOR][COLOR=#e01e1e]l[/COLOR][COLOR=#d51e1e]u[/COLOR][COLOR=#ca1f1f]i[/COLOR][COLOR=#be1f1f]d[/COLOR][COLOR=#b32020]e[/COLOR][/B] et plus [B][COLOR=#eb1d1d]pr[/COLOR][COLOR=#e11d1d]of[/COLOR][COLOR=#d61e1e]es[/COLOR][COLOR=#cc1e1e]si[/COLOR][COLOR=#c21f1f]on[/COLOR][COLOR=#b71f1f]ne[/COLOR][COLOR=#ad2020]l[/COLOR][/B] ! Et voilà :RG: c'est la fin de ce tutoriel, si vous avez des questions n'hésitez pas à me MP ou à les poser dans les commentaires pour que d'autres personnes [B][COLOR=#eb1d1d]pui[/COLOR][COLOR=#e11d1d]sse[/COLOR][COLOR=#d71e1e]nt v[/COLOR][COLOR=#cd1e1e]ous [/COLOR][COLOR=#c31f1f]rép[/COLOR][COLOR=#b91f1f]ond[/COLOR][COLOR=#af2020]re[/COLOR][/B]. :tchuss:[/CENTER] [/QUOTE]
Insérer les citations…
Vérification
Publier la réponse
Forums
Forums généraux
Informatique
Développement
TUTO JS | Envoyer un formulaire sans rafraîchir la page
Ce site utilise des cookies. En continuant à utiliser ce site, vous acceptez l'utilisation des cookies.
Acceptez
En savoir plus.…
Haut