logo oujood
🔍

jQuery AJAX la méthode get() et post() Echanger des données avec le serveur à l'aide d'une requête HTTP GET. Ou POST

OUJOOD.COM

Définition et Usage la méthode get()

La méthode get() est utilisée pour exécuter une requête AJAX HTTP GET.

Syntaxe

$(sélecteur).get(url,data,success (response,status,xhr),dataType)

Cette syntaxe est un raccourci de la fonction d'Ajax, qui est équivalente à :

>
		$.ajax({
		  url: url,
		  data: data,
		  success: success,
		  dataType: dataType
		});

Exemple Modifier le texte d'un élément div à l'aide d'une requête GET AJAX :

Pour exécuter cet exemple vous pouvez utiliser tout fichier texte dont vous disposez, à condition de remplacer  "demo_ajax_load.txt" par le nom de votre fichier.

Code

📝  Copier le code 

<!DOCTYPE html> 
 <html lang="fr">
 <head>
      <meta charset="utf-8">
   <title>jQuery AJAX la méthode get()</title>
<script src=" https://code.jquery.com/jquery-3.6.0.min.js "></script>
<!-- Script utilisant la méthode ajax  -->
<script>
$(document).ready(function(){
  $("button").click(function(){
    $.get("https://www.oujood.com/jquery/ajax_load.txt", function(resultat){
      $("div.result").html(resultat);
    });
  });
});
</script>
<style>
.result{max-width:400px;}
</style>
</head> 
<body> 
<div>
	<h1 style="color:green">www.oujood.com</h1>
	
	<h2>jQuery la méthode ajax</h2>
	<h3>Laiser ajax faire le travail</h3>
<!--******************************************-->  
<div class="result">ce contenu sera remplacé par le texte du fichier "ajax_load.txt" pour celà cliquez 
sur le bouton "changer le contenu"</div>
<button>Changer le Contenu</button>
</body>
  </html>

Exemple Modifier le texte d'un élément <span> à l'aide d'une requête GET AJAX :

Dans cet exemple nous allons utilisé un fichier php que nous nommons resultat.php dont voici le code :

Code php

📝  Copier le code 

<?php
if( $_REQUEST["nom"] ) {
$nom = $_REQUEST['nom'];
$prenom = $_REQUEST['prénom'];
echo "Bonjour ". $prenom ." ".$nom;
}
?>
Ce code PHP est utilisé pour récupérer des données lorsque le programme html ci-dessous envoie la requête HTTP GET. En effet les données récupérées sont le nom et le prénom que nous allons utiliser pour dire bonjour.

Code code html

📝  Copier le code 

<!DOCTYPE html> 
 <html lang="fr">
 <head>
      <meta charset="utf-8">
   <title>jQuery AJAX la méthode get()</title>
<script src=" https://code.jquery.com/jquery-3.6.0.min.js "></script>
<!-- Script utilisant la méthode ajax  -->
<script>
		$(document).ready(function() {
		$("#driver").click(function(event) {
				$.get(
				"resultat.php", {
					nom: "GERYWA",prénom:"Carabde"
				},
				function(data) {
					$('#stage').html(data);
				});
			});
		});
	</script>

</head> 
<body> 

	<h1 style="color:green">www.oujood.com</h1>
	
	<h2>jQuery la méthode ajax</h2>
	<h3>Laiser ajax faire le travail</h3>
<!--******************************************-->  
<p>Click on the button to load result file
</p>
<div>
	<span id="stage" style="border:solid 1px #000;padding:5px;margin:15px">
		Ce texte sera remplacé
	</span>
		<input type="button" id="driver" value="Load Data">
</div>
</body>
  </html>

Définition et Usage la méthode post()

La méthode post() est utilisée pour exécuter une requête AJAX HTTP POST.

Syntaxe

$(sélecteur).post(url,data ,success (response,status,xhr),dataType)

Cette syntaxe est un raccourci de la fonction d'Ajax, qui est équivalente à :


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

Paramètre

Description

URL

Obligatoire. Spécifie l'url à laquelle la requête est envoyée

data

Facultatif. Spécifie les données à envoyer au serveur avec la demande

Success ( Response,Status,xhr )

Facultatif. Spécifie la fonction à exécuter si la demande réussit
Paramètres supplémentaires :

  • Response- contient les données de résultat de la demande
  • status - contient l'état de la demande ("success", "notmodified", "error", "timeout", or "parsererror")
  • xhr - contient l'objet XMLHttpRequest

dataType

Facultatif. Spécifie le type de données attendu de la réponse du serveur.
Par défaut, jQuery effectue une estimation automatique.
Types possibles :

  • « xml » - document An XML
  • « html » - HTML en texte brut
  • « text » - une chaîne de texte brut
  • « script » - exécute la réponse comme JavaScript et retourne en tant que texte brut
  • « json » - exécute la réponse JSON et retourne un objet JavaScript
  • « jsonp » - charges dans un bloc JSON à l'aide de JSONP. Ajoutera un «? rappel =? » à l'URL pour spécifier le rappel

Exemple Modifier le texte d'un élément div à l'aide d'une requête AJAX POST :

Code

📝  Copier le code 

<!DOCTYPE html> 
 <html lang="fr">
 <head>
      <meta charset="utf-8">
   <title>jQuery AJAX la méthode post()</title>
<script src=" https://code.jquery.com/jquery-3.6.0.min.js "></script>
<!-- Script utilisant la méthode ajax -->
<script>
$(document).ready(function(){
  $("input#requette").keyup(function(){
    txt=$("input#requette").val();
    $.post("https://www.oujood.com/jquery/demo_ajax_post.php",{suggest:txt},function(result){
      $("span").html(result);
    });
  });
});
</script>
</head> 
<body> 

	<h1 style="color:green">www.oujood.com</h1>
	
	<h2>jQuery la méthode ajax</h2>
	<h3>Laiser ajax faire le travail</h3>
<!--******************************************-->  
<div>
<p>Commencez à saisir le nom d'un anima dans la zone de saisie suivante:<br>
Nom animal:</p>
<input type="text"  id="requette">
<p>Suggestions:<br> <span></span></p>

</div>
</body>
  </html>

Vous pouvez télécharger le fichier php utilisé dans cet exemple ICI: ( demo_ajax_post.php).

     jQuery Liste des méthodes AJAX
Par gerywa 25 juillet 2014 - mis à jour le 3 Mars 2922