Ajax启动事件问题

Question

Im trying to show a progressbar when my page is doing an ajax request.

I have a div with an image inside it and i would like to show it on the ajaxStart event. The problem is the img only shows itself when the ajaxStart event is done. However the alert is fired before the ajax request.

         $(document).ajaxStart(function () {
            alert("test");

            document.getElementById('LoadingDiv').style.visibility = "visible";

        });

Answer 1

                            $.ajax({
                            url: url,
                            async: true,
                            dataType: 'json',
                            success: function (data) {

Posted abit to early changed async to true and works now.

Answer 2

You can show/hide loading spinner like this:

/*LOADING SPINNER*/
jQuery.ajaxSetup({
  beforeSend: function() {
     $('#loadingDiv').show()
  },
  complete: function(){
     $('#loadingDiv').hide()
  },
  success: function() {}
});

The #loadingDiv simply contains an animated image. The ajaxSetup method set default values for future Ajax requests. That means that this loading indicator will be shown every time when making ajax calls.