Hoe laad ik Individual Div zonder de hele pagina te laden en de laadstatus te tonen?

Ik doe dit:

eerst heb je de verborgen div met een loading if erin en een load-knop:

<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" />

Dan heb je de JS-code (ik gebruik 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>

Dus. Je hebt een container "displayDiv"; binnenin heb je een afbeelding "loadingGif" en een andere container "actualContent"; Wanneer u op de laadknop klikt, verschijnt de grote container met de laad-gif, die de gebruiker op de hoogte stelt dat er iets wordt geladen. Wanneer de inhoud is geladen, verbergt u gewoon de loadingGif en geeft u de informatie weer in de "actualContent" gif. In de test.php echo je gewoon wat er in de div moet staan. Ik raad aan om JSON te gebruiken, maar je leest er meer over.

Ik hoop dat dit helpt.