Comment puis-je charger une division individuelle sans charger la page entière et afficher l'état de chargement ?

Je fais ceci :

vous avez d'abord la div cachée avec un chargement si dedans et un bouton de chargement :

<div id="displayDiv" style="display: none">
  <img id="loadingGif" src="loadingGif" style="display:none"; />
  <div id="actualContent" style="display:none" />
</div>
<input type="button" id="loadButton" />

Ensuite, vous avez le code JS ( j'utilise jQuery )

<script type="text/javascript">
   $(document).ready( onDocumentReady); // this runs before page load

   function onDocumentReady()
   {
      $('#loadButton').click( onLoadClick ); //assign action on button click
   }   

   function onLoadClick()
   {
       $('#loadingGif').show(); // show the loading gif. It won't show as long as it's parent is hidden
       $('#actualContent').hide(); // hide the actual content of the response;
       $('#displayDiv').show(); // display the div
       $.get("test.php", onRequestComplete ); // make the ajax request to the stand alone PHP file
      //so as long as the content loads, the loading gif will show;
   }

   function onRequestComplete( data )
   {
      $('#loadingGif').hide();
      $('#actualContent').html( data );
      $('#actualContent').show();
   }
</script>

Alors. Vous avez un conteneur "displayDiv" ; à l'intérieur, vous avez une image "loadingGIf" et un autre conteneur "actualContent" ; Lorsque vous cliquez sur le bouton de chargement, le grand conteneur avec le gif de chargement apparaît, informant l'utilisateur que quelque chose est en cours de chargement. Lorsque le contenu est chargé, il vous suffit de masquer le loadingGif et d'afficher les informations dans le gif "actualContent". Dans le test.php, vous répétez simplement ce qui doit apparaître dans la div. Je recommande d'utiliser JSON, mais vous en saurez plus à ce sujet.

J'espère que cela vous aidera.