Se connecter / S'enregistrer
Votre question

Actualiser une zone de la page sans recharger la page complète

Tags :
  • Php
  • Architecture
  • Programmation
Dernière réponse : dans Programmation
12 Octobre 2011 00:15:39

Bonjour,

Je sais que ma question est un sujet récurrent mais je n'ai malheureusement pas trouvé de solution à mon problème.
Je suis actuellement entrain de développer un site web en php et je me heurte à un problème.

Je voudrais que quand on click sur un lien de la barre de navigation, ça ne recharge pas toute la page mais seulement le corps de la page qui contient les articles.

Voici le code de mon <body> pour vous aider à comprendre
  1. <body>
  2. <!--Entête de la page-->
  3. <?php include("architecture/entete.php"); ?>
  4.  
  5. <!--Barre de navigation-->
  6. <?php include("architecture/nav_barre.php"); ?>
  7.  
  8. <!--Corps de la page-->
  9. <?php include("corps/corps_articles.php"); ?>
  10.  
  11. <!--Pied de page-->
  12. <?php include("architecture/footer.php"); ?>
  13. </body>


Je voudrais que quand on click sur un lien de la barre de navigation, ce soit corps_articles.php qui soit remplacé par la nouvelle page, par exemple par la page corps_contact.php.

J'ai cru comprendre grâce à mes recherches qu'il fallait utiliser du javascript. Mais je ne sais pas si mon code tel quel me permette une utilisation du dit javascript.

Ce que je souhaite est-il réalisable avec une architecture de la sorte ? comment faire pour réussir à dire à php quelle page il doit charger sans pour autant tout recharger ? et surtout comment le faire ?

J'espère avoir été clair et surtout obtenir des réponses constructives !

Merci.

Autres pages sur : actualiser zone page recharger page complete

a c 232 L Programmation
12 Octobre 2011 08:46:08

Salut,

En effet, il faut utiliser du JavaScript, et plus spécialement l'objet XMLHttpRequest, qui va te permettre de récupérer les données d'une page, pour pouvoir les afficher dans ta page actuelle.

Ce qui serait bien, c'est que ta page corps soit dans une div (ou autre containeur) à laquelle tu mets un id, pour pouvoir facilement changer son contenu.

Une petite recherche sur XMLHttpRequest te donnera des milliers de résultats sur comment l'utiliser.
12 Octobre 2011 16:29:27

Ça tombe très bien, la <div> correspondant au corps à pour id="corps". En fait à la longue, je veux avoir un fichier php par lien qu'il y a dans la barre de navigation. Comme ça, quand je clic sur "contact", c'est la page contact.php qui est appelée, et dans le fichier contact.php, tout le contenu brut est entre les balise <div id="corps"></div>. Et il en va de même pour tous les autres fichiers php appelés par les liens de la barre de navigation.

Voici le code de "corps_articles.php" :
  1. <div id="corps">
  2. <div class="article">
  3. bla bla bla ceci est un article
  4. </div>
  5. </div>


Ducoup comme ma <div> a un id, c'est plus "facile" à mettre en œuvre c'est bien ça ? je vais me renseigner de suite sur XMLHttpRequest !
Contenus similaires
a c 232 L Programmation
12 Octobre 2011 17:38:38

Une fois que tu auras fait ta requête XMLHttpRequest, ça va te donner le résultat de ta page au format texte.
Donc tu auras juste besoin de faire :
  1. document.getElementById("corps").innerHTML = leResultatObtenu;
24 Octobre 2011 12:50:42

Alors après de nombreuses recherches, je crois avoir trouvé ce qu'il faut mais j'ai encore un peu de mal à l'adapter à mon cas.

  1. <body>
  2. <a href="#" onclick="chargePage(contact)">Contact</a><br>
  3. <div id="corps"></div>
  4. <script type="text/javascript">
  5. function chargePage(toThis)
  6. {
  7. document.getElementById("corps").innerHTML = toThis;
  8. }
  9. contact=contact.php;
  10. </script>
  11. </body>


Bien entendu, ce code ne fonctionne pas. Au lieu de me charger le contenu du fichier .php il va juste m'écrire une chaîne de caractères dans "corps".

Comment puis-je lui indiquer qu'il faut qu'il me charge un fichier.php ?
a c 232 L Programmation
24 Octobre 2011 14:01:18

Là je te renvoie à la 1ère réponse que je t'ai faite... c'est exactement la même.
Tom's guide dans le monde
  • Allemagne
  • Italie
  • Irlande
  • Royaume Uni
  • Etats Unis
Suivre Tom's Guide
Inscrivez-vous à la Newsletter
  • ajouter à twitter
  • ajouter à facebook
  • ajouter un flux RSS