Nous avons commencé le tutoriel pour obtenir le créer et soumettre des formulaires via Ajax, pour cela quand on crée des pages en HTML c'est très facile faire des formulaires saisie de données, soit pour nous servir de Formulaire de contact avec la page ou l'organisation elle-même, pour réaliser une enquête, telle que l'inscription, etc. La chose normale est que si nous voulons créer ce formulaire pour quelque chose de simple, nous utilisons la méthode PHP Post pour envoyer les informations et pouvoir les visualiser, les traiter ou les modifier.
Cependant, l'utilisation de cette méthode en PHP a un grand inconvénient, que lors de la saisie de données, nous avons besoin de mettre à jour ou de recharger la page en question. C'est pourquoi nous allons voir une méthode dans laquelle il n'y en a pas besoin.
Je veux dire un formulaire créé avec Ajax, également aidé avec PHP et créé pour une page en HTML. Evidemment nous devons créer notre page en HTML, notre index, que nous pouvons customiser ou personnaliser avec des styles grâce à un fichier CSS.
Après avoir créé cette base, nous devrons créer 2 autres fichiers, un fichier php où nous modifierons les données saisies par le formulaire et un script implémenté en javascript, c'est-à-dire un fichier .js. C'est dans ce script que nous utiliserons Ajax pour traiter les données de manière à ce que nous n'ayons pas besoin de recharger notre page Web comme cela se produirait si nous n'utilisions qu'une méthode php telle que Post ou get.
En plus de cela nous devrons inclure une bibliothèque jQuery pouvoir interpréter ce que nous écrivons avec Ajax.
Pour commencer, il est important de se rappeler que tous les fichiers que nous créons, notre fichier javascript Ajax que nous appellerons operation.js, le fichier de feuille de style CSS que nous appellerons styles.css, si nous allons en créer un, et le bibliothèque de jQuery, nous devons l'inclure au début de notre code HTML.
C'est aussi simple que les inclure dans la tête de notre index.html :
…Nous allons maintenant créer un fichier avec un code php simple que nous appellerons envio.php où nous collecterons les informations envoyées via notre page Web. Dans ce cas, les informations seront destinées à un formulaire de contact, les données seront donc envoyées à notre propre adresse e-mail pour pouvoir lire les messages laissés par les utilisateurs, bien que cela puisse être modifié et envoyé vers une autre page ou un autre endroit.
Après avoir créé le code php, passons à la chose vraiment intéressante qui est la création de notre fichier operation.js où nous utiliserons Ajax. De cette manière, nous traiterons les données de notre formulaire de contact sans mettre à jour la page comme indiqué précédemment. Nous allons d'abord montrer le code que nous devons écrire dans notre script :
function sendMail() {$ ("# car_send").attr ("disabled", true); $ (". car_error"). remove (); filtre var = / [A-Za-z] [A-Za-z0-9 _] * @ [A-Za-z0-9 _] +. [A-Za-z0-9 _.] + [A -za-z] $ /; var s_email = $ ('# c_mail').val (); var s_name = $ ('# c_name').val (); var s_msj = $ ('# c_msg').val (); if (filter.test (s_email)) {sendMail = "true"; } else {$ ("# c_mail"). after ("Entrez un email valide."); sendMail = "false"; } if (s_name.length == 0) {$ (‘# c_name’).after ("Veuillez entrer votre nom."); var sendMail = "false"; } if (s_msj.length == 0) {$ (‘# c_msg’).after ("Entrez le message."); var sendMail = "false"; } if (sendMail == "true") {var data = {"name": $ ('# c_name'). val (), "email": $ ('# c_mail'). val (), "message" : $ ('# c_msg').val ()}; $ .ajax ({data: data, url: 'sending.php', type: 'post', beforeSend: function () {$ ("# car_send"). val ("Envoi …");}, succès : function (réponse) {$ ('form') [0] .reset (); $ ("# car_enviar"). val ("Submit"); $ ("# c_information p"). html (response); $ (" #c_information "). fadeIn ('slow'); $ (" # car_enviar "). removeAttr (" disabled ");}}); } else {$ ("# car_submit"). removeAttr ("disabled"); }} Nous créons la variable de filtre pour vérifier que l'e-mail que nous insérons est valide, pour cela nous mettons que l'adresse saisie est une séquence de caractères suivie d'un symbole at, une autre séquence de caractères, un point et plus de caractères. S'il n'a pas cette structure lorsque nous envoyons le message, il nous dira qu'il ne peut pas être envoyé car l'e-mail saisi n'est pas valide. S'il répond aux exigences, stockez la valeur true dans la variable d'envoi de courrier électronique sendMail et poursuivez la vérification.
Validez ensuite la longueur du nom. S'il est égal à 0, cela signifie que nous n'avons pas saisi de nom et il nous demande de le saisir à nouveau.
Il fait de même avec le message et sa longueur pour vérifier que nous n'avons pas laissé le champ vide.
Après avoir vérifié tous les champs et vu qu'ils sont corrects, enregistrez dans la variable data qui est un tableau, le nom, l'email et le message à envoyer.
Enfin, avec Ajax, nous passons les données et faisons référence au fichier envio.php en utilisant la méthode post et nous envoyons les informations. Avant d'être envoyé, le message apparaît "Envoi en cours" jusqu'à ce que le processus se termine avec succès.
Avez-vous aimé et aidé ce tutoriel ?Vous pouvez récompenser l'auteur en appuyant sur ce bouton pour lui donner un point positif
