Libellés

JavaScript Form Data Fetch - Envoyer un formulaire en JavaScript

Méthode avec les promesses

Les promesses permettent de développer de manière fonctionnelle.

 /** Méthode avec les promesses */
 function handleSubmit(event) {

     //Empêche l'action du formulaire et le rafraichissement de la page
     event.preventDefault();

     fetch("login.php", {
         //Méthode POST ou GET
         method: "POST",
         //Les données du formulaire
         body: new FormData(event.srcElement)
     })

     //Récupération de la réponse et conversion de la réponse au format texte
     .then(response => response.text())

     //Affiche une alerte avec la réponse au format texte
     .then(txtResponse => alert(txtResponse));

 }

Méthode Asynchrone

La méthode asynchrone avec les mots clés async et await permettent de développer de manière procédurale. await bloque et la ligne de code attend la réponse.

/** Méthode Asynchrone */
async function handleSubmitAsync(e) {

    //Empêche l'action du formulaire et le rafraichissement de la page
    event.preventDefault();

    var response = await fetch("login.php", {
        //Méthode POST ou GET
        method: "POST",
        //Les données du formulaire
        body: new FormData(event.srcElement)
    });

    //Récupération de la réponse et conversion de la réponse au format texte
    var txtResponse = await response.text();

    //Affiche une alerte avec la réponse au format texte
    alert(txtResponse);
}

Le code PHP pour recevoir le formulaire

<?php

$username =  $_POST["username"];
$password = $_POST["password"];

if($username == "username" && $password == "password"){
    echo "connected";
} else {
    echo "not connected";
}

Le code complet

<!DOCTYPE html>
<html lang="fr">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Formdata fetch</title>
</head>

<body>

    <!-- Changer le nom de la méthode -->
    <form action="" onsubmit="handleSubmitAsync(event)">
        <input type="text" name="username" id="username" />
        <input type="password" name="password" id="password" />
        <input type="submit" value="Se connecter" />
    </form>

    <script>
        /** Méthode Asynchrone */
        async function handleSubmitAsync(e) {

            //Empêche l'action du formulaire et le rafraichissement de la page
            event.preventDefault();

            var response = await fetch("login.php", {
                //Méthode POST ou GET
                method: "POST",
                //Les données du formulaire
                body: new FormData(event.srcElement)
            });

            //Récupération de la réponse et conversion de la réponse au format texte
            var txtResponse = await response.text();

            //Affiche une alerte avec la réponse au format texte
            alert(txtResponse);
        }

        /** Méthode avec les promesses */
        function handleSubmit(event) {

            //Empêche l'action du formulaire et le rafraichissement de la page
            event.preventDefault();

            fetch("login.php", {
                //Méthode POST ou GET
                method: "POST",
                //Les données du formulaire
                body: new FormData(event.srcElement)
            })

            //Récupération de la réponse et conversion de la réponse au format texte
            .then(response => response.text())

            //Affiche une alerte avec la réponse au format texte
            .then(txtResponse => alert(txtResponse));

        }
    </script>

</body>

</html>
Envoyer l'article par e-mail
Libellés :

Commentaires

Enregistrer un commentaire