如何在ajax中添加加载效果

Currently I have this code that gets the data from external PHP whenever clicked but it shows to quick what I need is that some delay with loading effects, I tried jQuery fade In Slow but it didn't work for me

$(document).ready(function() {
    $("#display").click(function() {                
      $.ajax({    //create an ajax request to load_page.php
        type: "GET",
        url: "o.php",             
        dataType: "html",   //expect html to be returned                
        success: function(response){                    
            $("#responsecontainer").fadeIn('slow').html(response); 
            //alert(response);
        }
    });
});
});

this way you can slowdown your output.

$(document).ready(function() {
$("#display").click(function() {                
  $.ajax({    //create an ajax request to load_page.php
    type: "GET",
    url: "o.php",             
    dataType: "html",   //expect html to be returned                
    success: function(response){                    
        setTimeout(function({
            $("#responsecontainer").fadeIn('slow').html(response)
        },100); 
    }
});
});
});

I guess u can try like this..

$(document).ready(function() {
      $("#display").click(function() {    
         // add loaders here
         $(".class").html('<img src="loader.gif" style="align:center;">');  
      $.ajax({    //create an ajax request to load_page.php
        type: "GET",
        url: "o.php",             
        dataType: "html",   //expect html to be returned                
        success: function(response){                    
            $("#responsecontainer").fadeIn('slow').html(response); 
            //alert(response);
        }
    });
        // make class empty
        $(".class").html('');
  });
  });

Use delay() and queue() methods. You can write it even in one line.

The delay() method sets a timer to delay the execution of the next item in the queue.

The queue() method shows the queue of functions to be executed on the matched elements.

$('#responsecontainer').html('<img src="loading.gif">').delay(2000).queue(function() { $(this).load('o.php'); });