Soumettre le formulaire sans rafraîchissement de page - PHP / jQuery

Lors de la soumission d'un formulaire, les utilisateurs s'attendent à une expérience utilisateur transparente. Même la moindre perturbation de l'expérience de navigation peut entraîner une baisse du taux de conversion. Supposons que votre site Web dispose de plusieurs petits formulaires qui obligent les utilisateurs à saisir les détails personnels, les adresses et autres informations sensibles. Dans ce cas, vous devez envisager la mise en œuvre de la validation de l'Ajax et des fonctionnalités de voies automobiles pour réduire le risque que les utilisateurs perdent leurs données.

Ce billet de blog vous apprendra comment créer un formulaire Ajax sans rafraîchissement de page avec PHP et jQuery. Vous pourrez également mettre en œuvre des fonctionnalités de voies automobiles pour les visiteurs de votre site Web et voir des exemples de la manière dont les meilleures pratiques peuvent être mises en œuvre dans des scénarios réels. Commençons!

1. Page Web principale

Créer et indice.html fichier sur votre site Web à l'aide du contenu suivant. Ceci est le formulaire HTML principal qui s'affiche sur la page du site Web. Vous pouvez simplement intégrer un formulaire dans n'importe quelle page de site Web.

 Soumettre le formulaire sans rafraîchissement de page - PHP / jQuery - Tecadmin.Nom du net: 
 E-mail: 
 Pas de téléphone:
 Genre Homme Femme
   
 Vos données s'affichent ci-dessous… 
 =============================
      

2. Créer JavaScript

Créez maintenant une page JavaScript avec nom soumettre.js à l'intérieur js Répertoire utilisant le contenu suivant. Vous pouvez optimiser ce javascript en ajoutant les validations jQuery.

fonction soumeformData () var name = $ ("# name").val (); var e-mail = $ ("# e-mail").val (); var téléphone = $ ("# téléphone").val (); var sexe = $ ("entrée [type = radio]: vérifié").val (); $.Post ("Soumettre.php ", nom: nom, e-mail: e-mail, téléphone: téléphone, genre: genre, fonction (data) $ ('# résultats').HTML (données); $ ('# myform') [0].réinitialiser(); );  

3. Créer un script PHP

Créez maintenant un script PHP nommé soumettre.php. Ce script fera toutes vos opérations soutenues. Lorsque nous soumettrons le formulaire Web, ce script obtiendra tous les arguments de la publication. Vous pouvez personnaliser ce script en fonction de vos besoins, comme la sauvegarde des valeurs dans la base de données, les enregistrements électroniques à l'administrateur, etc.

"; echo $ _post ['e-mail'] ."
"; echo $ _post ['téléphone'] ."
"; echo $ _post ['Gender'] ."
"; echo" ============================
"; echo" toutes les données soumises avec succès!" ?> 

4. Essai

Accès maintenant indice.html page sur le navigateur Web et tester cet exemple. Vous pouvez également voir cette démo.

Conclusion

Les formulaires AJAX sont un élément essentiel du développement des applications Web modernes et peuvent être utilisés pour améliorer l'expérience utilisateur en diminuant le temps nécessaire pour soumettre des données. La technologie derrière Ajax Forms a considérablement progressé au cours des dernières années, en particulier avec l'avènement de cadres JavaScript plus puissants qui offrent des fonctionnalités supplémentaires et une facilité d'utilisation. Il est important de noter que les avantages de l'utilisation d'un formulaire AJAX ne se limitent pas aux sites Web. En fait, les mêmes concepts peuvent être appliqués pour créer une application mobile avec une interface utilisateur réactive. C'est pourquoi il est important de comprendre les bases de la création d'une forme ajax et des avantages qui viennent avec.