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

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>

• $.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 $.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 $.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);
  });
});

• 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 ] )

$.ajax({
  type: "POST",
  url: url,
  data: data,
  success: success,
  dataType: dataType
});

• 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

É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:



• 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

Solution

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

Énoncé

• Utiliser le script (exemple de $.post())ci-dessus pour réaliser la page représentée par l’image suivante:



• Réaliser la page php en question

Solution

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

É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é



Solution

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