Methode post ajax

Pour toutes les discussions javascript, jQuery et autres frameworks
Répondre
vince21
Messages : 3
Enregistré le : 13 févr. 2023, 11:34

Methode post ajax

Message par vince21 » 13 févr. 2023, 12:03

Bonjour,
je débute en JavaScript, je désire utiliser la méthode POST avec AJAX mais je n'y parviens pas. Je ne comprends pas le fonctionnement. Mon bute est d'alimenter un select de façon dynamique. pour le moment afin de bien comprendre le principe je veux juste récupérer le résultat dans un div.
Merci de votre aide.
voici mes code :
Formulaire:

Code : Tout sélectionner

<?php 
    try
        {
            $db = new PDO('mysql:host=localhost;dbname=cs_semur;charset=utf8', 'root', 'root');
        }
            catch (Exception $e)
        {
            die('Erreur : ' . $e->getMessage());
        }

$distinc_matricule = 
"SELECT DISTINCT t_inscription_formation_copie.matricule , t_personnel.nom, t_personnel.prenom 
FROM t_inscription_formation_copie 
JOIN t_personnel on t_inscription_formation_copie.matricule = t_personnel.matricule ";
?>

<!DOCTYPE html>
<html lang="fr">
    <head>
        <!-- En-tête de la page -->
        <meta charset="utf-8" />
        <link rel="stylesheet" type="text/css" href="">
        <title>Formulaire essais</title>
    </head>
        <body>
            <form action = "" method="post">
                <h1 class="selection_personnel"> SELECTION DU PERSONNEL </h1>
                <div class = "p_select_personnel"><label for ="personnel"> Nom: </label>
                    <select id="personnel" onchange ="getchange();" class="personnel" name ="personnel">
                        <option value="" selected> </option>
                            <?php
                                $requete = $db -> prepare($distinc_matricule);
                                $requete -> execute();
                                $resultat = $requete -> fetchAll();
                                foreach ($resultat as $ligne)
                                    {
                            ?>
                        <option value = "<?php echo $ligne ['matricule'];?>">
                            <?php echo $ligne['matricule']," ",$ligne['nom']," ",$ligne['prenom']; ?>
                        </option>
                            <?php
                                    }
                            ?>
                    </select>
                </div>
                <div id = "demo">
                    
                </div>
            </form>
        <script type="text/javascript" src="index_essais.js"></script>    
        </body> 
</html>
index_essais.php

Code : Tout sélectionner

<?php 
    try
    {
        $db = new PDO('mysql:host=localhost;dbname=cs_semur;charset=utf8', 'root', 'root');
    }
        catch (Exception $e)
    {
        die('Erreur : ' . $e->getMessage());
    }
    
    $matricule = $_POST['matricule'];
    
        if(isset($_POST['matricule'])){

                $requete = $db -> prepare("SELECT * FROM t_inscription_formation_copie WHERE matricule = ?");
                $requete -> execute();
                $resultat = $requete -> fetchAll(); 
                foreach ($resultat as $ligne){
                    
                        echo $ligne['id_inscription_formation'];
                    }
            } 
            
?>
index_essais.js

Code : Tout sélectionner


function getchange(){
var xhr = new XMLHttpRequest();
var champ_matricule = document.getElementById("personnel").value;
var demo = document.getElementById("demo");
var data = "matricule="+champ_matricule;

xhr.onreadystatechange = function () {
    console.log (this);

    if(xhr.readyState == 4 && xhr.status == 200){
        demo.innerHTML = xhr.response;
    }
  };
 
  xhr.open("POST","index_essais.php",true);
  xhr.responseType = "text";
  xhr.send(data);

};

Avatar du membre
webmaster
Administrateur du site
Messages : 563
Enregistré le : 28 févr. 2017, 15:19

Re: Methode post ajax

Message par webmaster » 13 févr. 2023, 19:48

Bonjour

Avant toute chose, il faut s'assurer que le code PHP retourne bien la bonne valeur.

Dans un appel POST, il faut ajouter ca avant le send :

Code : Tout sélectionner

xhr.setRequestHeader("content-type","application/x-www-form-urlencoded");
Que donne la console ?
TJS : 25 ans et mon livre Tout JavaScript chez Dunod
https://www.toutjavascript.com/livre/index.php

vince21
Messages : 3
Enregistré le : 13 févr. 2023, 11:34

Re: Methode post ajax

Message par vince21 » 13 févr. 2023, 21:26

Bonjour,
merci de l'info.
Effectivement je viens de rajouter cette ligne et ça fonctionne.
pouvez vous m'expliquer pourquoi cette ligne ?

Code : Tout sélectionner

xhr.setRequestHeader("content-type","application/x-www-form-urlencoded");
Merci. ;)

Avatar du membre
webmaster
Administrateur du site
Messages : 563
Enregistré le : 28 févr. 2017, 15:19

Re: Methode post ajax

Message par webmaster » 14 févr. 2023, 09:31

Content d'avoir aidé

Cette ligne sert à transformer le data = "matricule="+champ_matricule en véritable envoi via POST, comme si c'était un formulaire.
TJS : 25 ans et mon livre Tout JavaScript chez Dunod
https://www.toutjavascript.com/livre/index.php

vince21
Messages : 3
Enregistré le : 13 févr. 2023, 11:34

Re: Methode post ajax

Message par vince21 » 14 févr. 2023, 12:34

Merci :)

emmausa
Messages : 2
Enregistré le : 10 juil. 2023, 04:47

Re: Methode post ajax

Message par emmausa » 10 juil. 2023, 04:52

Je suis très heureux de lire votre article car il contient de n ombreuses informations utiles et utiles que je recherche. slither io

Répondre