Làm cách nào để tải Đơn vị riêng lẻ mà không tải toàn bộ trang và hiển thị trạng thái tải?

Tôi làm điều này:

trước tiên, bạn có div ẩn với một nút tải nếu trong đó và một nút tải:

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

Sau đó, bạn có mã JS (tôi sử dụng 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>

Cho nên. Bạn có một vùng chứa "displayDiv"; bên trong bạn có một hình ảnh "loadingGIf" và một vùng chứa khác "Thực tế Nội dung"; Khi bạn nhấp vào nút tải, vùng chứa lớn với gif đang tải sẽ xuất hiện, thông báo cho người dùng rằng có thứ gì đó đang tải. Khi nội dung được tải, bạn chỉ cần ẩn loadingGif và hiển thị thông tin trong gif "Thực tế nội dung". Trong test.php, bạn chỉ cần lặp lại những gì phải xuất hiện trong div. Tôi khuyên bạn nên sử dụng JSON, nhưng bạn sẽ đọc thêm về nó.

Hy vọng điều này sẽ hữu ích.