jQuery ajaxComplete() Method

Last Updated : 12 Jul, 2023

The ajaxComplete() method is used to specify a 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.

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

html

<!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>

demo.txt

"This is GeeksforGeeks.!"

Output:

jquery-72

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

AJAX request completes.

html

<!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 () {
                $("h1").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>