by JM CréaDans 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.
4 commentaires
Oui, j’avais oublié de mettre le ? au début du fichier rand.php
J’ai corrigé le code 🙂
pas réussi a le faire fonctionné ?
Bonjour,
Ce script ne fonctionne pas.
Il reste sur Merci …
une idée ?
Effectivement il y avait un petit soucis.
C’est corrigé 🙂