Ajax avec JQuery - exemple : changement du contenu d' un div
Ajax avec JQuery - exemple : changement du contenu d' un div .
Tout d' abord il faut aller télécharger la dernière version de JQuery à cette adresse : http://jquery.com/
Dans notre page HTML test.html on va inclure dans le la librairie JQuery et mettre en place dans le body la structure de notre page .
<head>
<script type="text/javascript" src="jquery-1.3.1.min.js"></script>
</head>
<body>
<a href="contenu1.html">contenu1.html</a>
-
<a href="contenu2.html">contenu2.html</a><div id="contenu">
Contenu avant utilisation des liens
</div></body>
</html>
On dispose maintenant de deux liens qui devront se charger dans le div " contenu " quand l' utilisateur effectuera un clic dessus .
Maintenant il faut créer deux " pages " HTML contenu1.html et contenu2.html qui se chargeront dans le div " contenu " .
Voici par exemple le code pour contenu1.html
Maintenant dans le head de notre première page test.html on va implémenter notre code javascript avec l' Ajax avec JQuery .
Voici le code final de la page .
<head>
<script type="text/javascript" src="jquery-1.3.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){ // le document est chargé
$("a").click(function(){ // on selectionne tous les liens et on définit une action quand on clique dessus
page=($(this).attr("href")); // on recuperer l' adresse du lien
$.ajax({ // ajax
url: page, // url de la page à charger
cache: false, // pas de mise en cache
success:function(html){ // si la requête est un succès
afficher(html); // on execute la fonction afficher(donnees)
},
error:function(XMLHttpRequest, textStatus, errorThrows){ // erreur durant la requete
}
});
return false; // on desactive le lien
});
});function afficher(donnees){ // pour remplacer le contenu du div contenu
$("#contenu").empty(); // on vide le div
$("#contenu").append(donnees); // on met dans le div le résultat de la requête ajax
}
</script>
</head>
<body>
<a href="contenu1.html">contenu1.html</a>
-
<a href="contenu2.html">contenu2.html</a>
<div id="contenu">
Contenu avant utilisation des liens
</div>
</body>
</html>
voir toutes les infos : Informatique
« Formulaire HTML : effacer le contenu d' un input à sa sélection ( Javascript )
Augmenter la vitesse de sa connexion internet - vidéo des réglages à faire »
Commentaires
Super tutoriel merci beaucoup !
Par contre si on rajoute des liens sur la page qui mène à d’autres pages, ils ne fonctionnent pas comment y remédier ??
Posté le 28 juillet 2009
Exemple intuitif, merci pour cet effort, Bonne continuation
Posté le 4 novembre 2009
Salut,
merci pour ce beau tuto.
Mais j’ai une question:
- est que ça marche avec un formulaire du style « input » qui reverrait vers un fichier php ?
Posté le 10 janvier 2010
Bonjour, le code fonctionne super bien, Merci.
Par contre comment faire pour afficher le morceau de page DANS la page principale quand on fait clic-droit ouvrir dans nouvelle fenêtre/onglet ?
afin de garder l’integralité du site ?
Merci d’avance
Posté le 14 mars 2010
Votre avis sur le billet : Ajax avec JQuery - exemple : changement du contenu d' un div