Какой самый простой / лучший способ показать, что HTML-элемент - это AJAX-загрузка?

Question

Иногда в моем приложении загружается много элементов, поэтому я хочу показать типичный вращатель AJAX над элементом управления (или узлом DOM) с отключенным.

Какой самый простой / лучший способ сделать это?

В идеале я хотел бы:

$("#myelement").loading();
$("#myelement").finishloading();

Или, что еще лучше, возможность делать запросы AJAX напрямую с элементом:

$("#myelement").post(url, params, myfunction);

Будучи #myelement обычным узлом или входом формы.

Answer 1

Вы можете использовать beforeSend и complete обратные вызовы:

$.ajax({
    url: 'script.cgi',
    type: 'POST',
    beforeSend: function() {
        $('.spinner').show();
    },
    complete: function() {
        // will trigger even if request fails
        $('.spinner').hide();
    },
    success: function(result) {
        // todo: do something with the result
    }
});

Answer 2

Поскольку вы уже используете jQuery, возможно, вы захотите изучить BlockUI в сочетании с ответом Дарина Димитрова . Я еще не использовал его сам, поскольку только что столкнулся с этим сегодня, но это выглядит прилично.

Если вы пишете приложение полуширокого размера и ожидаете много вызовов AJAX из разных мест в вашем коде, я бы посоветовал вам добавить слой абстракции над $.ajax или создать вспомогательную функцию для Избегайте повсеместного использования котельной пластины для вашего индикатора пользовательского интерфейса. Это очень поможет вам, если вам когда-нибудь понадобится изменить индикатор.

Метод абстракции

var ajax = function(options) {
    $.ajax($.extend(
        {
            beforeSend: function() {
                $.blockUI();
            },
            complete: function() {
                $.unblockUI();
            }
        }, 
        options
    ));
};

ajax({
    url: 'script.cgi',
    type: 'POST',
    success: function(result) {
        // todo: do something with the result
});

Вспомогательный метод

var ajaxSettings = function(options) {
    return $.extend(
        {
            beforeSend: function() {
                $.blockUI();
            },
            complete: function() {
                $.unblockUI();
            }
        }, 
        options
    );
};

$.ajax(ajaxSettings({
    url: 'script.cgi',
    type: 'POST',
    success: function(result) {
        // todo: do something with the result
    }
}));

Кроме того, я бы не советовал перезаписывать сам метод $.ajax.

Answer 3

Если вы хотите показывать счетчик каждый раз, когда идет вызов ajax, я думаю, вы должны использовать ajaxStart и ajaxStop .

$("#spinner")
  .ajaxStart(function(){$(this).show();})
  .ajaxStop(function(){$(this).hide();});

Answer 4

что я делал в прошлом, так это то, что после публикации передается идентификатор элемента (содержащий div) в функцию, которая заменяет его внутренний HTML загружаемым изображением, а затем в обратной записи заменяет его содержимое снова обновленным. реальное содержание.