Как реализовать образ jQuery spinner в запросе AJAX

У меня есть запрос jQuery AJAX, который я хочу отобразить gif AJAX spinner во время загрузки запроса, а затем исчезнуть, как только запрос будет успешным, может ли кто-нибудь предложить лучший метод для реализации этого в моем коде jquery ниже:

function updateCart( qty, rowid ){
$.ajax({
        type: "POST",
        url: "/cart/ajax_update_item",
        data: { rowid: rowid, qty: qty },
        dataType: 'json',
        success: function(data){                
            render_cart(data);
        }           
    });
}
9
ajax jquery json

4 ответов

  1. получить загрузчик от ajax loader (формат GIF)
  2. поместите это изображение туда, где вы хотите показать/скрыть.
  3. до "Аякса", показать это изображение.
  4. после окончания скрыть изображения 
function updateCart( qty, rowid ){
$('.loaderImage').show();
$.ajax({
        type: "POST",
        url: "/cart/ajax_update_item",
        data: { rowid: rowid, qty: qty },
        dataType: 'json',                         
        success: function(data){                
            render_cart(data);
            $('.loaderImage').hide();
        },
        error: function (response) {
           //Handle error
           $("#progressBar").hide();

    }           
    });
}
25
var $loading = $('#loadingDiv').hide();
$(document)
  .ajaxStart(function () {
    $loading.show();
  })
  .ajaxStop(function () {
    $loading.hide();
  });

где "#loadingDiv " - это spinner gif, покрывающий часть страницы или всю страницу.

5

Я делаю это, показывая / скрывая div с gif-изображением. Это работает как шарм:

<script type="text/javascript">

    $("#progressBar").corner();  
    $("#progressBar").show();


    jQuery.ajax({
        url: "../Nexxus/DriveController.aspx",
        type: "GET",
        async: true,
        contentType: "application/x-www-form-urlencoded",
        //data: param,
        success: function (response) {
            //Manage your response.

            //Finished processing, hide the Progress!
            $("#progressBar").hide();
        },
        error: function (response) {
            alert(response.responseText);
            $("#progressBar").hide();

        }
    });

  </script>
4

On Preloaders.net Вы можете найти очень открытый код вместе со всеми объяснениями как в чистом JavaScript, так и в форматах JQuery. Вы можете получить изображения загрузчика там тоже

-1