✨ อัปเดตล่าสุด: web//https://www.geeksforgeeks.org/jquery ajaxcomplete method

The ajaxComplete() method is used to specify function to be run when an AJAX request completes.

Syntax:

$(document).ajaxComplete(function(event, xhr, options))

Parameter:

event: It contains the event object.
xhr: It contains the XMLHttpRequest object.
options: It contains the used options in AJAX request.

The demo.txt file stored on the server and it will load after clicking the change content button.
The content of demo.txt are:
This is GFG.

Example-1:This example changes the content of < p > element, by taking the data from server. When the AJAX request completes, the page says AJAX request completes..

<!DOCTYPE html> 
<html> 
  
<head> 
    <script src= 
"https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"> 
    </script> 
    
    <script> 
        $(document).ready(function() { 
            $(document).ajaxComplete(function() { 
                alert(" AJAX request completes."); 
            }); 
            $("button").click(function() { 
                $("#paragraph").load("demo.txt"); 
            }); 
        }); 
    </script> 
    
    <style> 
        body { 
            text-align: center; 
        } 
    </style> 
</head> 
  
<body> 
    <div id="div_content"> 
        <h1 style="color: green;"> 
          GeeksforGeeks 
      </h1> 
        <p id="paragraph"
           style="font-size: 20px;"> 
            A computer science portal for geeks 
        </p> 
    </div> 
    <button>Change Content</button> 
</body> 
  
</html> 

Output:

Before click on the button
After click on the button

Example-2: This example changes the content of <h1> element, by taking the data from server. When the AJAX request completes, the page says AJAX request completes..

<!DOCTYPE html> 
<html> 
  
<head> 
    <script src= 
"https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"> 
    </script> 
    <script> 
        $(document).ready(function() { 
          $(document).ajaxComplete(function() { 
              alert("AJAX request completes."); 
          }); 
          $("button").click(function() { 
              $("#paragraph").load("demo.txt"); 
          }); 
      }); 
    </script> 
    <style> 
        body { 
            text-align: center; 
        } 
    </style> 
</head> 
  
<body> 
    <div id="div_content"> 
        <h1 style="color: green;"> 
          GeeksforGeeks 
      </h1> 
        <p id="paragraph"
           style="font-size: 20px;"> 
            A computer science portal for geeks 
        </p> 
    </div> 
    <button>Change Content</button> 
</body> 
  
</html> 

Output:

Before click on the button
After click on the button

My Personal Notes

Oct	NOV	Dec
	23
2019	2020	2021

jQuery | ajaxComplete() Method

Recommended Posts: