Après avoir abordé les requêtes asynchrones en JS, il est temps de les mettre en pratique en voyant comment traiter nos formulaires de façon asynchrone à l'aide de JavaScript et, dans cet exemple, de PHP !
Code du tuto :
- index.html
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>TUTO JS et PHP - #15 Traiter un formulaire de façon asynchrone (avec XMLHTTPRequest)</title> <link href="css/style.css" type="text/css" rel="stylesheet"> </head> <body> <h1>TUTO JS et PHP - #15 Traiter un formulaire de façon asynchrone (avec XMLHTTPRequest)</h1> <form id="inscription"> <input type="text" placeholder="Pseudo" name="pseudo"><br> <input type="email" placeholder="Email" name="email"><br> <input type="password" placeholder="Mot de passe" name="mdp"><br> <input type="submit" value="Inscription"> </form> <script src="js/app.js"></script> </body> </html> - js/app.js
document.getElementById("inscription").addEventListener("submit", function(e) { e.preventDefault(); var data = new FormData(this); var xhr = new XMLHttpRequest(); xhr.onreadystatechange = function() { if (this.readyState == 4 && this.status == 200) { console.log(this.response); var res = this.response; if (res.success) { console.log("Utilisateur inscrit !"); } else { alert(res.msg); } } else if (this.readyState == 4) { alert("Une erreur est survenue..."); } }; xhr.open("POST", "/async/script.php", true); xhr.responseType = "json"; // xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded"); xhr.send(data); return false; }); - async/script.php
<?php // echo json_encode($_POST); $success = 0; $msg = "Une erreur est survenue (script.php)"; $data = []; if (!empty($_POST['pseudo']) AND !empty($_POST['email']) AND !empty($_POST['mdp'])) { $pseudo = htmlspecialchars(strip_tags($_POST['pseudo'])); $email = htmlspecialchars(strip_tags($_POST['email'])); $mdp = password_hash($_POST['mdp'], PASSWORD_DEFAULT); if (strlen($pseudo) < 10) { if (filter_var($email, FILTER_VALIDATE_EMAIL)) { // Ajout de l'utilisateur en base de données à cet endroit (exemple) $success = 1; $msg = ""; $data['mdp'] = $mdp; } else { $msg = "Adresse email invalide"; } } else { $msg = "Votre pseudo doit contenir moins de 10 caractères"; } } else { $msg = "Veuillez renseigner tous les champs"; } $res = ["success" => $success, "msg" => $msg, "data" => $data]; echo json_encode($res);
Votre commentaire