Partage
  • Partager sur Facebook
  • Partager sur Twitter

Utilisation de AJAX sur du POST

Utilisation d'AJAX avec données à envoyer en BDD

Sujet résolu
    23 octobre 2018 à 11:05:20

    Bonjour à tous, 

    Je vous contacte car je rencontre énormément de difficultés pour utiliser AJAX sur du POST (un formulaire qui doit inséré des données dans une BDD notamment), j'ai essayé différentes méthodes mais il semblerait que je n'arrive à en maîtriser aucune plus que les autres. 

    Je vous poste donc ci-dessous le code que j'ai essayé de faire en JQUERY :

    $(function(){
        $("#ajout").click(function(){
            var pseudo = encodeURIComponent( $('#pseudo').val() );
                if(pseudo != ""){
                    $.ajax({
                        url: "select_amis.php",
                        type: "POST",
                        data: "pseudo=" + pseudo,
                        dataType: 'html',
                        timeout: 1000,
                        success: function(pseudo){
                        $('#resultat').append('<p style="color: red;">Une erreur est survenue, votre requête n\'a pas aboutie</p>')
                        },
                        error: function(){
                        $('#resultat').append('<p style="color: red;">Une errur est survenue, votre requête n\'a pas aboutie</p>')
                    },
                        });
                    }
                })
                
            });

    Je vous poste aussi ci-dessous le code d'une personne qui utilise AJAX en GET et qui fonctionne parfaitement mais que je n'arrive pas à adapter en POST : 

            function ajax(div, data) {
              var xhttp = new XMLHttpRequest();
              xhttp.onreadystatechange = function() {
                if (this.readyState == 4 && this.status == 200) {
                    document.getElementById(div).innerHTML = this.responseText;
                }
              };
              xhttp.open("GET", data, true);
              xhttp.send();
            }

    Quelqu'un pourrait-il si le premier code est bon ? Comment améliorer le deuxième pour faire en sorte qu'il fonctionne sur du POST et avec des données à envoyer en BDD ? 

    Je tiens à rappeler que je rencontre énormément de difficultés en JAVASCRIPT et en AJAX particulièrement. 

    Si quelqu'un veut bien m'expliquer en détails comment utiliser AJAX sur du POST ? 

    Merci d'avance à tous ceux qui m'apporteront leur aide.

    Cordialement. 

    Quentin.



    • Partager sur Facebook
    • Partager sur Twitter
      23 octobre 2018 à 11:47:00

      Je sais pas si c'est un problème mais tu as le même nom de variable pour ce que tu envoie et reçois (pseudo). Vérifie que tu ai mis le bon url.

      Un exemple de code ajax en POST qui marche pour moi :

      		$.ajax({
      			url : '../_modules/mod_TestAPISchneider.php',
      			type : 'POST',
      			data: "ipCoSchneider=" + ipCoSchneider + "&protoSchneider=" + protoSchneider,
      			success : function(data){
      				console.log(data);
      				ajaxdata = data;
      			}
      		});



      • Partager sur Facebook
      • Partager sur Twitter

      Call me Spaceman

        23 octobre 2018 à 12:01:39

        NeoSensEight a écrit:

        Je sais pas si c'est un problème mais tu as le même nom de variable pour ce que tu envoie et reçois (pseudo). Vérifie que tu ai mis le bon url.

        Un exemple de code ajax en POST qui marche pour moi :

        		$.ajax({
        			url : '../_modules/mod_TestAPISchneider.php',
        			type : 'POST',
        			data: "ipCoSchneider=" + ipCoSchneider + "&protoSchneider=" + protoSchneider,
        			success : function(data){
        				console.log(data);
        				ajaxdata = data;
        			}
        		});



        Bonjour, 

        Je ne vois pas ce que tu veux dire quand tu dis que "j'ai mis les mêmes variables en envoi et en réception" ?

        Ensuite, pour ton code AJAX, le fichier que tu mets en URL si j'ai bien cerné le principe, c'est le fichier PHP qui va s'occuper de toutes les modifications de la BDD ? 

        Et pour DATA, ce sont des variables JAVASCRIPT que tu as obtenu depuis une page HTML ou une page PHP. Cela ferait : var bidule = document.getElementby (ID, NOM ou CLASSE) pour récupérer la variable ? 

        Merci d'avance pour les réponses que tu m'apporteras. 

        Cordialement.

        Quentin.

        • Partager sur Facebook
        • Partager sur Twitter
          23 octobre 2018 à 13:23:44

          Dans "data: "pseudo="+ pseudo," c'est ce que tu envoie à ton fichier .php et dans "success: function(pseudo)" c'est ce que le fichier .php te répond ( si je me trompe pas ).

          Pour mon cas c'est pas de la gestion de BDD mais oui c'est ce fichier qui execute tout le code php que tu veux.

          Oui dans DATA: se sont des variables javascript.

          • Partager sur Facebook
          • Partager sur Twitter

          Call me Spaceman

            23 octobre 2018 à 13:30:31

            NeoSensEight a écrit:

            Dans "data: "pseudo="+ pseudo," c'est ce que tu envoie à ton fichier .php et dans "success: function(pseudo)" c'est ce que le fichier .php te répond ( si je me trompe pas ).

            Pour mon cas c'est pas de la gestion de BDD mais oui c'est ce fichier qui execute tout le code php que tu veux.

            Oui dans DATA: se sont des variables javascript.


            D'accord. 

            Donc si j'arrive bien à comprendre le principe de ce fichier AJAX, c'est juste de transmettre des variables au fichier situé dans l'URL ? 

            Donc pour le traitement de la BDD dans mon fichier PHP dans l'URL, je dois réutiliser les variables du fichier AJAX ? 

            Dans les parenthèses pour le success, je dois donc mettre les données qu'AJAX doit envoyé au fichier dans l'URL ? C'est donc bien ce fichier dans l'URL qui doit s'occuper du traitement BDD et de tout ce qui se fait en PHP ?

            P.S. :Je suis débutant et comme je disais, j'ai énormément de difficultés avec JAVASCRIPT donc j'essaye de comprendre le principe. 

            Merci d'avance pour les réponses que tu m'apporteras. 

            Cordialement. 

            Quentin.

            • Partager sur Facebook
            • Partager sur Twitter
              23 octobre 2018 à 14:01:48

              Beaucoup de questions :)

              Ajax n'est pas un fichier mais une fonction javascript. Tu mets ta fonction Ajax dans le javascript de ta page. Ajax va alors executer un fichier .php sur ton serveur en lui envoyer des données que tu transmet avec :

              data: "ipCoSchneider=" + ipCoSchneider + "&protoSchneider=" + protoSchneider,

              Sur ton serveur le fichier .php que tu indique ici :

              url : '../_modules/mod_TestAPISchneider.php',

              va s’exécuter et si besoin envoyer des données en retour à ta fonction Ajax.

              Tout ça se fais sans que ta page web coté Client n'ai besoin d'être rechargée.

              Pour répondre aux questions, Ajax sert à exécuter un fichier .php sur ton serveur et éventuellement à lui transmettre des données. Oui tu récupère les variables que Ajax t'envoie dans ton fichier .php comme si tu les recevais d'un formulaire :

              $ipCoSchneider=$_POST['ipCoSchneider'];
              $protoSchneider=$_POST['protoSchneider'];

              Non dans les parenthèses de success tu as la variable qui contient ce que le fichier .php renvoie à Ajax.

              Et pour finir oui, le fichier que tu indique avec l'url est le fichier .php qui s’exécute sur ton serveur et permet par exemple de faire le traitement de ta BDD. 



              • Partager sur Facebook
              • Partager sur Twitter

              Call me Spaceman

                23 octobre 2018 à 14:13:04

                NeoSensEight a écrit:

                Beaucoup de questions :)

                Ajax n'est pas un fichier mais une fonction javascript. Tu mets ta fonction Ajax dans le javascript de ta page. Ajax va alors executer un fichier .php sur ton serveur en lui envoyer des données que tu transmet avec :

                data: "ipCoSchneider=" + ipCoSchneider + "&protoSchneider=" + protoSchneider,

                Sur ton serveur le fichier .php que tu indique ici :

                url : '../_modules/mod_TestAPISchneider.php',

                va s’exécuter et si besoin envoyer des données en retour à ta fonction Ajax.

                Tout ça se fais sans que ta page web coté Client n'ai besoin d'être rechargée.

                Pour répondre aux questions, Ajax sert à exécuter un fichier .php sur ton serveur et éventuellement à lui transmettre des données. Oui tu récupère les variables que Ajax t'envoie dans ton fichier .php comme si tu les recevais d'un formulaire :

                $ipCoSchneider=$_POST['ipCoSchneider'];
                $protoSchneider=$_POST['protoSchneider'];

                Non dans les parenthèses de success tu as la variable qui contient ce que le fichier .php renvoie à Ajax.

                Et pour finir oui, le fichier que tu indique avec l'url est le fichier .php qui s’exécute sur ton serveur et permet par exemple de faire le traitement de ta BDD. 



                D'accord. 

                Tout d'abord, merci pour l'aide que tu m'apportes et les explications que tu me fournis.

                Ensuite, j’ai encore quelques petits points qui ne sont pas très clairs : :lol:

                Comment est-ce que le script AJAX en l’occurrence va savoir que c'est à lui de récupérer les données d'abord pour les transférer à PHP et pas PHP qui doit les récupérer d'abord ?

                Peut-être parce que pour AJAX, le PHP ne doit pas se situer dans la même page que le HTML et qu'il est justement appelé que par le script AJAX ? 

                Si j'ai bien compris aussi, selon toi, le mieux pour du AJAX est de mettre le script AJAX dans la même page que le code HTML plutôt que de le mettre dans un fichier externe en utilisant la balise <script src=""> ?

                Au niveau de ton script AJAX, dans les paramètres de la fonction success, tu renvoie les données que tu as donc obtenu depuis le serveur par la biais de data ? 

                P.S.: Oui je sais, il y a encore beaucoup de questions...:honte:

                Merci d'avance. 

                Quentin.

                • Partager sur Facebook
                • Partager sur Twitter
                  23 octobre 2018 à 14:31:53

                  Je suis désolé mais j'ai du mal à t'expliquer simplement le fonctionnement :/ Est-ce que tu es alaise avec la notion de Client/Serveur ? Comprend tu l'utilisation des différents langage web ( ici html, php et js ) ? 

                  • Partager sur Facebook
                  • Partager sur Twitter

                  Call me Spaceman

                    23 octobre 2018 à 14:53:26

                    NeoSensEight a écrit:

                    Je suis désolé mais j'ai du mal à t'expliquer simplement le fonctionnement :/ Est-ce que tu es alaise avec la notion de Client/Serveur ? Comprend tu l'utilisation des différents langage web ( ici html, php et js ) ? 


                    Oui, je pense comprendre les notions de clients et serveurs (pour faire simple, le code client s’exécute du côté client sans faire appel au serveur et donc sans forcément rafraîchir la page alors que le code serveur doit forcément communiquer avec le serveur pour obtenir les instructions) ?

                    Au niveau des langages côté clients, il me semble que ce sont HTML, JAVASCRIPT, JQUERY (mais identique au JAVASCRIPT dans le fonctionnement) alors que serveur c'est PHP qui fait donc appel au serveur pour réaliser les instructions. 

                    J'ai donc modifier un peu mon script (il est dans un fichier en .php, je ne suis pas sûr que ce soit la bonne méthode ?): 

                    $(function(){
                        $("#ajout").click(function(){
                            var pseudo = encodeURIComponent( $('#pseudo').val() );
                                if(pseudo != ""){
                                    $.ajax({
                                        url: "select_amis.php",
                                        type: "POST",
                                        data: "pseudo=" + pseudo,
                                        success: function(data){
                                        $('#resultat').append('<p style="color: green;">Félicitations, votre deamnde à bien été réalisée. Vous devez maintenant attendre que votre ami ai accepté votre demande (vous serez notifié quand ce sera le cas)</p>')
                                        },
                                        error: function(){
                                        $('#resultat').append('<p style="color: red;">Une erreur est survenue, votre requête n\'a pas aboutie</p>')
                                    },
                                        });
                                    }
                                })
                                
                            });

                    Et voici donc mon fichier (véritablement PHP qui s'occupe de tout ce qui est mouvement dans la BDD) : 

                     <?php
                    require_once 'config_hebergeur.php';
                    $id_joueur = $_SESSION['id'];
                    $date_actuelle = time();
                                $pseudo2 = $_POST['pseudo']; 
                                $pseudo = $bdd->prepare('SELECT * FROM membres WHERE pseudo = :pseudo');
                                $pseudo->execute([
                                    ':pseudo' => $pseudo2
                                 ]);
                                    $donnees = $pseudo->fetch();
                                        $pseudo = $donnees['pseudo'];
                                        $id_pseudo = $donnees['id'];
                                if($pseudo == $pseudo2){
                                    $ins = $bdd->prepare('INSERT INTO validation(id_ami, id_joueur, date) VALUES (?, ?, ?)');
                                    $ins->execute(array($id_pseudo, $id_joueur, $date_actuelle));
                                }
                    ?>

                    La fonction AJAX en elle-même semble avoir fonctionné car il me renvoi le texte de la fonction SUCCESS mais malheureusement dans la BDD, rien ne se passe. 

                    Tu as une idée de ce qui pose problème avec les 2 codes présents ? 

                    Selon la logique de clients/serveurs, je devrais donc mettre mon code JQUERY dans un fichier en .html ou en .js pour qu'il fonctionne (puisque actuellement, il est dans un fichier en .php) ?


                    • Partager sur Facebook
                    • Partager sur Twitter
                      23 octobre 2018 à 15:21:03

                      Dans le fichier php que tu appel avec ajax, tu utilise la variable $pseudo pour deux choses différentes :

                      $pseudo = $bdd->prepare...
                      $pseudo->execute([...
                      $donnees = $pseudo->fetch();

                      et

                      $pseudo = $donnees['pseudo'];

                      ça pose peut-être problème ?

                      pour $date_actuelle, j'utilise personnellement timestamp dans ma base de donnée et donc dans ma requête j'utilise NOW() :

                      $req = $bdd->prepare("INSERT INTO SauvContinue(DateHeure, Index_Val, Donnee) VALUES (NOW(), :index_Val, :donnee);");

                      A ta place je donnerais une valeur à $pseudo2 dans le fichier pour essayer d’exécuter directement ton fichier .php sans passer par Ajax pour voir si le problème ne vient pas du fichier .php :

                      $pseudo2 = "ExemplePseudo";






                      • Partager sur Facebook
                      • Partager sur Twitter

                      Call me Spaceman

                        23 octobre 2018 à 17:56:26

                        NeoSensEight a écrit:

                        Dans le fichier php que tu appel avec ajax, tu utilise la variable $pseudo pour deux choses différentes :

                        $pseudo = $bdd->prepare...
                        $pseudo->execute([...
                        $donnees = $pseudo->fetch();

                        et

                        $pseudo = $donnees['pseudo'];

                        ça pose peut-être problème ?

                        pour $date_actuelle, j'utilise personnellement timestamp dans ma base de donnée et donc dans ma requête j'utilise NOW() :

                        $req = $bdd->prepare("INSERT INTO SauvContinue(DateHeure, Index_Val, Donnee) VALUES (NOW(), :index_Val, :donnee);");

                        A ta place je donnerais une valeur à $pseudo2 dans le fichier pour essayer d’exécuter directement ton fichier .php sans passer par Ajax pour voir si le problème ne vient pas du fichier .php :

                        $pseudo2 = "ExemplePseudo";






                        Effectivement après les quelques modifications que tu m'as préconisées, il semblerait que la page fonctionne maintenant (la page PHP renvoyait des erreurs qui devait empêcher le traitement de l'AJAX).

                        Cependant, j'ai encore 2 petites questions : 

                        • Le principe de l'AJAX, de base, il me semble que c'est de faire en sorte que la page ne se recharge pas et d'effectuer le traitement en arrière plan ? (car moi actuellement, ma page se recharge malgré l'utilisation d'AJAX). 
                        • Ensuite, comme je peux faire pour afficher le echo de ma page PHP sur ma page où s’exécute le AJAX ? Je dois peut-être créer une variable pour le echo que je fais utiliser par AJAX (si c'est le cas, comment faire ?) ?

                         Merci d'avance pour les réponse que tu m’apporteras. 

                        Cordialement.

                        Quentin.

                        -
                        Edité par QuentinGiraud5 23 octobre 2018 à 17:59:06

                        • Partager sur Facebook
                        • Partager sur Twitter
                          23 octobre 2018 à 19:02:34

                          Pour le rechargement de ta page c'est que tu dois avoir un bouton submit que tu doit enlever car même sans url il recharge la page.

                          Tout les echo que tu fais dans le php sont dans la variable que tu as dans success.

                          • Partager sur Facebook
                          • Partager sur Twitter

                          Call me Spaceman

                            23 octobre 2018 à 19:42:19

                            NeoSensEight a écrit:

                            Pour le rechargement de ta page c'est que tu dois avoir un bouton submit que tu doit enlever car même sans url il recharge la page.

                            Tout les echo que tu fais dans le php sont dans la variable que tu as dans success.


                            Effectivement, tu avais parfaitement raison sur le 1er point. 

                            Je tiens ensuite à te remercier pour toute l'aide que tu m'as déjà apportée.

                            Par contre sur le second, je rencontre encore un petit problème au niveau du echo car comme tu me dis, elle sont bien dans le data en cas de succès mais je n'arrive pas à l'afficher à l'écran de l'utilisateur, j'ai bien fais un console.log qui me renvoi le echo. 

                            J'ai bien essayé avec ("#MonID).html(data); mais cela ne fonctionne tu as une idée pour afficher le echo à l'écran ? 

                            Et cela risque du coup de m'afficher tout le code HTML présent dans le echo (pour le style) comme affiché dans le console.log ? Si c'est le cas, tu as une idée pour faire pour ne pas afficher le code HTML tel quel à l'écran mais qu'il s'applique sur le echo ?

                            Merci d'avance. 

                            Quentin.

                            • Partager sur Facebook
                            • Partager sur Twitter
                              24 octobre 2018 à 7:52:12

                              Pour que la mise en page html s'applique en javascript tu dois utiliser element.innerHTML.
                              • Partager sur Facebook
                              • Partager sur Twitter

                              Call me Spaceman

                                24 octobre 2018 à 9:05:10

                                NeoSensEight a écrit:

                                Pour que la mise en page html s'applique en javascript tu dois utiliser element.innerHTML.


                                D'accord. J'ai réussi à faire afficher ma phrase avec .append et en mettant mon code HTML dedans. 

                                Je crois aussi que je me suis rendu compte que je le n'utilisais pas le bon ID de la DIV, donc cela faisait que ma variable DATA ne s'affichait pas. 

                                Merci pour toute l'aide que tu m'as apportée. 

                                Je passe le sujet en résolu.

                                Cordialement.

                                Quentin.

                                • Partager sur Facebook
                                • Partager sur Twitter

                                Utilisation de AJAX sur du POST

                                × Après avoir cliqué sur "Répondre" vous serez invité à vous connecter pour que votre message soit publié.
                                × Attention, ce sujet est très ancien. Le déterrer n'est pas forcément approprié. Nous te conseillons de créer un nouveau sujet pour poser ta question.
                                • Editeur
                                • Markdown