article
seize-1A10 à créé cet article le 12 mars 2018

Exemple jQuery ajax

Pour faire des requêtes asynchrones
Vous avez trouvé cet article utile ?
-
0
1
+

Mots clés :
jQuery


Afficher des informations externes
<!DOCTYPE html>
<html lang="fr">
<head>
	<meta charset="UTF-8">
	<title>Utilisation d'ajax</title>
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>

<body>
<div id="affichage"></div>
<button>Afficher</button>
	<script>
		$("button").click(function(){
			$.ajax({
				url: "bienvenue.txt", 
				success: function(result){
					$("#affichage").html(result);
				}
			});
		});
	</script>
</body>
</html>
L'appui sur le bouton déclenche l'appel à l'ajax $("button").click(function(){
Le code ajax va récupérer de l'info dans le fichier bienvenue.txt C'est un fichier texte qui peut contenir des balises html. Ce texte peut être généré dynamiquement avec PHP.

Voici le contenu du fichier texte : Bonjour,<br><b>Tout le monde</b>

Si le fichier appelé, est présent, cela  retourne un succès. La fonction success: function(result){ est exécutée.

Il ne reste plus qu'a afficher result

 

Post avec ajax pour envoyer et recevoir des données
<body>
	
<div id="affichage"></div>
<button>Afficher</button>

<script>
$("button").click(function(){
    $.post("retourneInfo.php",
    {
        dept: "Cher",
        ville: "Bourges"
    },
    function(data, status){
        console.log("Data: " + data);
        console.log("Status: " + status);
        $("#affichage").text(data);
    });
}); 
</script>

</body>
<?php
// ---- On récupère les infos envoyées par post ajax ----
$dept=$_POST['dept'];
$ville=$_POST['ville'];

//---- on traite les informations ----
if($dept=="Cher"){
	$temperature="18°C";
} else {
	$temperature="22°C";
}

// ---- On retourne les informations ----
echo $temperature;

?>











Créer une branche
Utilisez cet article comme base pour en créer une version différente