Показать Загрузка окна jQuery

Question

Я пытаюсь отобразить загрузочный div при отправке запроса на отправку ajax. Пробовал с этим кодом его не работает. Пожалуйста, помогите мне решить эту проблему.

$(document).ready(function() { 
    $('a.pagerlink').click(function(event){ 
     var id = $(this).attr('id'); 

     beforeSend: function() { 
      $('#load').show(); 
     }, 
     complete: function() { 
      $('#load').hide(); 
     }, 
     $.post(
       "invited-friends", 
       { gameid: id }, 
     function(data) { 
       $('#middlefriends').html(data); 
      } 

     ); 
    }); 
}); 

Мой html код

Loading ..

 <a id="1" class="pagerlink" >hi</a> 

Am ожидает отображения нагрузки div при возникновении ajax пост. И скрыть груз div после запроса завершено.

Answer 1

Вот измененный код: -

$(document).ready(function() { 
    $('a.pagerlink').click(function(event){ 
     var id = $(this).attr('id'); 
     $('#load').show(); 
     $.post("invited-friends", { gameid: id }, function(data) { 
      $('#load').hide(); 
      $('#middlefriends').html(data); 
     }); 
    }); 
}); 

Answer 2

Вы можете вместо этого использовать .ajaxStart и .ajaxStop методы:

var loading = $("#load"); 
$(document).on({ 
    ajaxStart: function() { loading.show(); }, 
    ajaxStop : function() { loading.hide(); } 
}); 

Answer 3

ваш делают это неправильно. Если вы пытаетесь сделать вызов AJAX, то он должен быть, как этот

$.ajax({ 
    url:"invited-friends", 
    data: { gameid: id }, 
    type:'POST', 
    success:function(data) { 
     $('#middlefriends').html(data); 
    }, 
    error: function(data) { 
     console.log(data); 
    }, 
    beforeSend: function() { 
     $('#load').show(); 
    }, 
    complete: function() { 
     $('#load').hide(); 
    } 
});