How to handle jQuery AJAX success event?

jQuery Web Development Front End Technology

To handle jQuery AJAX success event, use the ajaxSuccess() method. The ajaxSuccess( callback ) method attaches a function to be executed whenever an AJAX request completes successfully. This is an Ajax Event.

Here is the description of all the parameters used by this method −

callback − The function to execute. The event object, XMLHttpRequest, and settings used for that request are passed as arguments to the callback.

Let’s say we have the following HTML content in result.html −

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

Example

The following is an example showing the usage of this method −

Live Demo

<html>

   <head>
      <title>jQuery ajaxSuccess() method</title>
      <script src = "https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
       
      <script>
         $(document).ready(function() {
           
            /* Global variable */
            var count = 0;

            $("#driver").click(function(event){
               $('#stage0').load('result.html');
            });
               
            /* Gets called when request starts */
            $(document).ajaxStart(function(){
               count++;
               $("#stage1").html("<h1>Starts, Count :" + count + "</h1>");
            });
               
            /* Gets called when request is sent */
            $(document).ajaxSend(function(evt, req, set){
               count++;
               $("#stage2").html("<h1>Sends, Count :" + count + "</h1>");
               $("#stage2").append("<h1>URL :" + set.url  + "</h1>");
            });
               
            /* Gets called when request completes */
            $(document).ajaxComplete(function(event,request,settings){
               count++;
               $("#stage3").html("<h1>Completes,Count:" + count + "</h1>");
            });
               
            /* Gets called when request is stopped */
            $(document).ajaxStop(function(event,request,settings){
               count++;
               $("#stage4").html("<h1>Stops, Count :" + count + "</h1>");
            });
               
            /* Gets called when all request completes successfully */
            $(document).ajaxSuccess(function(event,request,settings){
               count++;
               $("#stage5").html("<h1>Success,Count :" + count + "</h1>");
            });
               
         });
      </script>
   </head>
   
   <body>
   
      <p>Click on the button to load result.html file:</p>
       
      <div id = "stage0" style = "background-color:blue;">
         STAGE - 0
      </div>
       
      <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>
       
      <div id = "stage4" style = "background-color:blue;">
         STAGE - 4
      </div>
       
      <div id = "stage5" style = "background-color:blue;">
         STAGE - 5
      </div>
       
      <input type = "button" id = "driver" value="Load Data" />
       
   </body>
</html>

David Meador

Published on 21-Dec-2017 08:07:10

Previous Page Print Page