Guide complet pour soumettre des données de formulaire à un serveur PHP à l'aide de JavaScript

Aperçu

Dans le développement Web moderne, la soumission des données de formulaire à un serveur PHP utilisant JavaScript est une pratique courante et efficace. De cette façon, les développeurs peuvent éviter de rafraîchir la page et d'améliorer l'expérience utilisateur. Cet article introduira en détail comment implémenter la soumission asynchrone des données de formulaire à l'aide de l'API Fetch de JavaScript et montrer comment traiter ces données du côté serveur PHP.

Concepts de base de la soumission de formulaire JavaScript

Les soumissions de formulaires contiennent généralement des données saisies par l'utilisateur. Dans les soumissions de forme traditionnelle, la page sera actualisée, entraînant une mauvaise expérience utilisateur. Avec l'API Fetch ou AJAX de JavaScript, nous pouvons envoyer des données de manière asynchrone au serveur sans recharger la page.

Soumettre le formulaire en utilisant l'API Fetch

L'API Fetch est un moyen facile d'envoyer des demandes HTTP dans JavaScript moderne. L'exemple suivant montre comment envoyer des données de formulaire à un serveur PHP via l'API Fetch.

 <span class="fun">const form = document.QuerySelector (&#39;# myform&#39;); form.addeventListener (&#39;soumider&#39;, fonction (événement) {event.preventDefault (); const FormData = new FormData (form); fetch (&#39;soumid.php&#39;, {méthode: &#39;post&#39;, body: formdata,}). console.log (&#39;Success:&#39;, data);}) .catch ((error) => {console.error (&#39;error:&#39;, error);});});</span>

Analyser le code ci-dessus

Dans cet exemple, nous sélectionnons d'abord l'élément de formulaire dans HTML. Bloquez le comportement de soumission par défaut du formulaire en appelant `Event.PreventDefault () '. Ensuite, nous créons un nouvel objet «FormData» qui collectera automatiquement toutes les données du formulaire. Enfin, utilisez l'API Fetch pour envoyer les données dans le fichier `Soumide.php` du serveur dans la publication.

Demandes de traitement du côté serveur PHP

Ensuite, nous recevrons et traiterons les données de formulaire soumises du côté PHP. Dans le fichier `soumid.php`, nous pouvons utiliser le code suivant pour obtenir les données du formulaire:

 <span class="fun">if ($ _server [&#39;request_method&#39;] == &#39;post&#39;) {$ name = $ _post [&#39;name&#39;]; $ email = $ _post [&#39;e-mail&#39;]; // effectuer la vérification et le traitement des données if (! Vide ($ name) && filter_var ($ e-mail, filter_validate_email)) {echo "name: $ name, e-mail: $ e-mail"; } else {echo "Données d&#39;entrée non valides."; }</span>

Assurer la sécurité des données

Lors du traitement des données du formulaire, la vérification et le nettoyage des données doivent être effectués pour empêcher les problèmes de sécurité potentiels tels que l'injection SQL ou la contrefaçon de demande de site transversal (CSRF). Par exemple, l'utilisation de la fonction `filter_var` de PHP peut vérifier le format de boîte aux lettres, garantissant ainsi l'exactitude et la sécurité des données.

Résumer

En combinant JavaScript et PHP, les développeurs peuvent traiter efficacement les soumissions de formulaires, éviter les rafraîchissements de page et améliorer l'expérience utilisateur. Au cours du processus de mise en œuvre, il est important de prêter attention à la vérification et à la sécurité des données pour assurer la stabilité et la sécurité de l'application.