Comment rafraichir qu’une partie de page web

by JM Créa 20 novembre 2017 Tutoriel HTML, Tutoriel Javascript 4

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.

4 Comments

tarquin-Reply
20 novembre 2017 at 16 h 08 min
Bonjour,
Ce script ne fonctionne pas.
Il reste sur Merci …
une idée ?
- JM Créa-Reply
  20 novembre 2017 at 13 h 37 min
  Effectivement il y avait un petit soucis.
  C’est corrigé 🙂
FredZ404-Reply
20 novembre 2017 at 4 h 09 min
pas réussi a le faire fonctionné ?
JM Créa-Reply
20 novembre 2017 at 17 h 47 min
Oui, j’avais oublié de mettre le ? au début du fichier rand.php
Je corrigé le code 🙂

Comment rafraichir qu’une partie de page web