Les méthodes get() et post() jQuery AJAX

Les méthodes get() et post() jQuery AJAX

  1. Objectifs

    • Etre capable d’utiliser les raccourcis $.get() et $.post()
  2. Présentation

    • Les méthodes jQuery get() et jQuery post() sont utilisées pour demander des données à partir du serveur avec un HTTP GET ou POST demande.
    • Écrire une fonction $.ajax() pour ensuite définir son type GET/POST dans le paramètre adéquat, c’est lourd. Pour créer directement une requête GET ou POST, il existe les fonctions $.get() et $.post().
    • Toutes les deux fonctionnent de la même manière, elles font appel implicitement à $.ajax() en lui spécifiant un type GET pour $.get() et un type POST pour $.post()
    • Il est primordial d’intégrer la bibliothèque Jquery pour pouvoir utiliser JQUERY AJAX de manière efficiente sans se soucier de la conception de la requête XhmlHttpRequest. Pour ce faire nous utilisons la balise script.
    • <script type="text/javascript" src="https://code.jquery.com/jquery-3.5.1.min.js"></script>




    • On peut trouver trois autres méthodes à notre disposition qui sont les suivantes :
      • $.getScript() : permet d’ajouter un script à une page ;
      • $.getJSON() : permet d’effectuer une requête GET à l’URL fournie et demande à ce que du JSON soit renvoyé en réponse.
      • $.load() : Cette méthode permet de télécharger le code HTML d’une URL et de placer ce code dans une sélection d’éléments.

    • La méthode jQuery $.get()
      • La méthode $.get() demande des données au serveur avec une requête HTTP GET.
      • Syntaxe:
        • $.get(URL,callback);
      • Paramètres:
        • Le paramètre URL requis spécifie l’URL que vous souhaitez demander.
        • Le paramètre de rappel facultatif (callback) est le nom d’une fonction à exécuter si la demande aboutit.
      • Exemple:
        • L’exemple suivant utilise la méthode $.get() pour récupérer des données à partir d’un fichier sur le serveur:
        • $("button").click(function(){
            $.get("demo_test.asp", function(data, status){
              alert("Data: " + data + "\nStatus: " + status);
            });
          });

    • La méthode jQuery $.post()
      • La méthode $.post() demande des données au serveur à l’aide d’une requête HTTP POST.
      • Syntaxe:
        • $.post( url, [data], [callback], [type] );
      • Paramètres:
        • Le paramètre URL requis spécifie l’URL que vous souhaitez demander, c’est une chaîne contenant l’URL à laquelle la demande est envoyée.
        • Le paramètre de data facultatif spécifie certaines données à envoyer avec la demande, ce paramètre représente les paires clé/valeur ou la valeur de retour de la fonction .serialize () qui sera envoyée au serveur.
        • Le paramètre de rappel facultatif (callback) est le nom d’une fonction à exécuter si la demande aboutit, ce paramètre facultatif représente une fonction à exécuter chaque fois que les données sont chargées avec succès.
        • type : Ce paramètre facultatif représente un type de données à renvoyer à la fonction de rappel: “xml”, “html”, “script”, “json”, “jsonp” ou “text”.
      • Exemple:
        • L’exemple suivant utilise la méthode $.post() pour récupérer des données à partir d’un fichier sur le serveur:
        • $("button").click(function(){
            $.post("demo_test_post.asp",
            {
              name: "Mohamed SALAH",
              city: "Tunisie"
            },
            function(data, status){
              alert("Data: " + data + "\nStatus: " + status);
            });
          });
  3. Les arguments demandés

    • Ces méthodes vont pouvoir prendre les arguments suivants (dans l’ordre) :
      • L’URL de la requête (obligatoire) ;
      • Les données à envoyer au serveur sous forme d’objet ou de chaine (facultatif). Cet argument n’est pas valide pour $.getScript() ;
      • Une fonction de rappel qui s’exécutera en cas de succès de la requête (facultatif). Cette fonction recevra la réponse du serveur ;
      • Le type de données attendu du serveur (facultatif). Cet argument n’est pas valide pour $.getJSON().

      $.post( url [, data ] [, success ] [, dataType ] )

    • est une fonction Ajax raccourcie, équivalente à:
    • $.ajax({
        type: "POST",
        url: url,
        data: data,
        success: success,
        dataType: dataType
      });
    • Les arguments demandés sont les mêmes :
      • l’URL: Cette chaîne contient l’adresse à laquelle envoyer la demande
      • data: objet ou chaîne simple envoyé au serveur avec la demande.
      • une fonction qui va gérer le retour
      • le format des données reçues
  4. Activités

    • Activité 01
      1. Énoncé
        • Créer un fichier de type txt dont le nom est: “demo_ajax_load.txt“, et le remplir par un texte quelquonque.
        • Créer le fichier HTML pour réaliser la page représentée par l’image suivante:
        • Les méthodes get() et post() jQuery AJAX

        • Si vous aurez besoin du style CSS réaliser -le dans un fichier distinct
        • Réaliser le script qui vous permet de changer le texte affiché dans la balise div par celui de contenu du fichier txt crée précédemment
      2. Solution
        • Essayez de faire l’activité de votre côté avant de regarder la Solution !
    • Activité 02
      1. Énoncé
        • Utiliser le script (exemple de $.post())ci-dessus pour réaliser la page représentée par l’image suivante:
        • Les méthodes get() et post() jQuery AJAX

        • Réaliser la page php en question
      2. Solution
        • Essayez de faire l’activité de votre côté avant de regarder la Solution !
    • Activité 03
      1. Énoncé
        • Refaire la page html crée dans l’activité 01 en ajoutant une zone de saisie qui transmettre l’entrée utilisateur à un script de serveur Web qui renverrait le même résultat précédent
        • Vous pouvez maintenant saisir n’importe quel texte dans la zone de saisie donnée, puis cliquer sur le bouton “Afficher le résultat” pour voir ce que vous avez entré dans la zone de saisie.
        • L’image suivante décrit le résultat souhaité
        • Les méthodes get() et post() jQuery AJAX

      2. Solution
        • Essayez de faire l’activité de votre côté avant de regarder la Solution !



Abonnez vous à notre chaîne YouTube gratuitement