Comment rafraichir qu’une partie de page web
Comment rafraichir qu’une partie de page web
Dans ce tutoriel, nous allons voir comment rafraichir qu'une partie de page web de manière simple.
Comme vous l'avez déjà vu, il existe de plus en plus de sites Internet qui utilisent cette fonction. Exemple : vous cliquez sur un lien présent sur le site, et seulement une partie du contenu se charge. La page en elle-même ne se recharge pas entièrement.
Dans bien des cas, ce "mécanisme" peut s'avérer pratique pour l'internaute qui visite votre site, même si parfois ça parait compliqué à mettre en place pour le développeur.
Vous allez voir que c'est relativement simple à mettre en place.
Passons à la pratique
Dans un premier temps, nous allons créer 2 fichiers. Le premier sera la page normale et le second sera la page qui sera appelée lors d'un clic.
Pour le premier fichier : nous allons l'appeler index.php et nous allons appeler la bibliothèque jquery et un petit peu de javascript comme ceci :
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
<script>
$(document).ready(function () {
$("#actualisez_moi").load("rand.php", {
});
var refreshId = setInterval(function () {
$("#actualisez_moi").load("rand.php", {
});
}, 2000); //Touts les 2 secondes le div sera actualisé
$.ajaxSetup({
cache: false
});
});
</script>
<div id="actualisez_moi">Merci de patienter ...</div>
</body>
On récapitule :
- 1 On appel la bibliothèque jquery dans les balises head
- 2 On appel la fonction javascript dans le body
-3 On place le div dans le body Pour le deuxième fichier : nous allons l'appeler rand.php et nous allons mettre ce que l'on veut dedans. Dans cet exemple, nous allons générer des nombres aléatoires de 0 à 9999. Vous pouvez bien sûr y mettre ce que vous voulez.
<?php echo rand(0,9999); ?>
C'est tout ce que vous avez à faire ! Rien de plus 🙂
Il vous faut bien sûr adapter ces scripts à vos pages, mais si vous suivez bien ce tuto, vous devriez pouvoir vous en sortir.
N'hésitez pas à commenter si vous avez des questions ou suggestions.
Facebook Twitter Google+ Linkedin Mail Mots clés associés : Tutoriel HTML, Tutoriel Javascript
A propos de l'auteur : JM Créa
JM Créa est une agence de communication à Antibes (dans les Alpes-Maritimes). Nous sommes spécialisé en création de site Internet sur mesure et en référencement Google avancé.
Laisser un commentaire
Derniers articles
février 14, 2019
juillet 11, 2018
juin 29, 2018
mars 13, 2018
janvier 5, 2018
novembre 20, 2017
septembre 14, 2017
septembre 14, 2017
Contactez-nous
521 ch. du Puy
06600 Antibes
Par villes
Les derniers articles
février 14, 2019
juillet 11, 2018
Suivez-nous sur Facebook
4 Comments
Bonjour,
Ce script ne fonctionne pas.
Il reste sur Merci …
une idée ?
Effectivement il y avait un petit soucis.
C’est corrigé 🙂
pas réussi a le faire fonctionné ?
Oui, j’avais oublié de mettre le ? au début du fichier rand.php
Je corrigé le code 🙂