ajaxStart(callback) trong jQuery

Đinh nghĩa ajaxStart(callback) trong jQuery

Phương thức ajaxStart(callback) trong jQuery đính kèm một hàm để được thực thi bất cứ khi nào một AJAX Request bắt đầu và không có hoạt động nào sẵn sàng. Đây là một Ajax Event.

Cú pháp ajaxStart(callback) trong jQuery

Sau đây là cú pháp cho ajaxStart(callback) trong jQuery:

$(document).ajaxStart( callback )

Tham số

Dưới đây miêu tả chi tiết về các tham số được sử dụng trong phương thức ajaxStart(callback) trong jQuery:

  • callback − Hàm để được thực thi.

Ví dụ minh họa ajaxStart(callback) trong jQuery

Giả sử chúng ta có nội dung HTML sau trong result.html file:

<h1>THIS IS RESULT...</h1>

Sau đây là ví dụ đơn giản minh họa cách sử dụng của phương thức ajaxStart(callback) trong jQuery:

<html>
   <head>
      <title>The jQuery Example</title>
      <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>


      <script type="text/javascript" language="javascript">
         $(document).ready(function() {
            /* Global variable */
            var count = 0;


            $("#driver").click(function(event){
               $('#stage1').load('../result.html');
            });
            /* Gets called when request starts */


            $(document).ajaxStart(function(){
               count++;
               $("#stage2").html("<h1>Starts, Count :" + count + "</h1>");
            });


            /* Gets called when request complete */
            $(document).ajaxComplete(function(event,request,set){
               count++;
               $("#stage3").html("<h1>Completes,Count:" + count + "</h1>");
            });
         });
      </script>

   </head>

   <body>

      <p>Click on the button to load result.html file:</p>


      <div id="stage1" style="background-color:blue;">
         STAGE - 1
      </div>


      <div id="stage2" style="background-color:blue;">
         STAGE - 2
      </div>

      <div id="stage3" style="background-color:blue;">
         STAGE - 3
      </div>

      <input type="button" id="driver" value="Load Data" />

   </body>

</html>

Bình luận