Tuto JS & PHP - #15 Traiter un formulaire de façon asynchrone

PrimFX Boris ('PrimFX') Le 7 novembre 2018

 

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);​

A propos de l'auteur

PrimFX
Boris ('PrimFX')

Je m'appelle Boris, j'ai 22 ans et je suis passionné d'informatique. Suite à mes études (Licence Informatique puis MSc Computer Science au Trinity College Dublin), je gère l'entreprise Single Quote co-fondée en 2019 et je profite de mon temps libre pour partager ma passion à travers des vidéos & articles 😃

Votre commentaire

Vous devez être connecté pour poster un commentaire. Se connecter ou Créer un compte

Commentaires 4

  • slimus Le 29 août, à 10:56 | Répondre

    @adamelkn @Miloux Il y a un caractère spécial à la fin des code PHP et JS qu'il suffit de supprimer pour régler le problème

  • adamelkn Le 7 juin, à 20:11 | Répondre

    Dans les logs il y a "invalid or unexpected token".

  • Miloux Le 28 janvier, à 19:13 | Répondre

    Ton code comporte une erreur : "invalid or unexpected token" !

  • Miloux Le 28 janvier, à 19:12 | Répondre

    Ton code comporte une erreur : "invalid or unexpected token" !