Bagaimana cara memuat Div Individu tanpa memuat seluruh halaman dan menunjukkan status pemuatan?

Saya melakukan ini:

pertama Anda memiliki div tersembunyi dengan pemuatan if di dalamnya dan tombol muat:

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

Kemudian Anda memiliki kode JS (saya menggunakan 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>

Jadi. Anda memiliki wadah "displayDiv"; di dalam Anda memiliki gambar "loadingGIF" dan wadah lain "actualContent"; Saat Anda mengklik tombol muat, wadah besar dengan gif pemuatan muncul, memberi tahu pengguna bahwa ada sesuatu yang sedang dimuat. Saat konten dimuat, Anda hanya menyembunyikan loadingGif, dan menampilkan info di gif "Konten aktual". Di test.php Anda hanya menggemakan apa yang harus muncul di div. Saya sarankan menggunakan JSON, tetapi Anda akan membaca lebih lanjut tentangnya.

Semoga membantu.