$ .post () предложение метода обратного вызова

Question

Я всегда использовал что-то вроде этого:

$("a.button").click(function() {
    data = ...;
    url = ...;
    $.post(url, data, function() {
        $(this).toggleClass('active');
    });
});

Проблема в том, что когда у пользователя медленное соединение и он нажимает на эту кнопку, похоже, он ничего не делает, потому что кнопка изменитсобственный статус (добавление класса active) после завершения запроса.Конечно, я могу «исправить» это поведение, добавив спиннер во время загрузки запроса.

Теперь проверьте это:

$("a.button").click(function() {
    $(this).toggleClass('active');
    data = ...;
    url = ...;
    $.post(url, data, function() {
        // if request is successful do nothing
        // else, if there's an error: $(this).toggleClass('active)
    });
});

Другими словами, я мгновенно меняю статус кнопкикогда кнопка нажата и после этого я проверяю на успех / ошибку.Это хороший способ?Что ты думаешь на счет?Есть ли другие способы?

Answer 1

Это больше вопрос интерфейса, чем кода.Лично я предпочитаю показывать счетчик в тех случаях, когда это может сбить с толку, если нет ответа.Поскольку я не знаю, какой класс вы переключаете и какое влияние он оказывает на элемент, я бы не знал, будет ли переключение до успеха вообще сбивать с толку.

Так или иначе, все живы знаютзагрузочный счетчик.С этим, наверное, можно безопасно.

Answer 2

У вас есть общая идея там. Вы можете реализовать это другими способами, например, установив глобальные функции AJAX ajaxStart и ajaxSuccess:

$("a.button").click(function() {
    data = ...;
    url = ...;
    $.post(url, data, function() {
        // if request is successful do nothing
    });
}).ajaxStart(function () {
    $(this).toggleClass('active');
}).ajaxComplete(function () {
    $(this).toggleClass('active');
}).ajaxError(function () {
    //never forget to add error handling, you can show the user a message or maybe try the AJAX request again
});

Эти методы регистрируют обработчики для вызова при определенных событиях, таких как как инициализация или завершение, выполняется для любого запроса AJAX на страница. Глобальные события запускаются при каждом запросе AJAX, если Глобальное свойство в jQuery.ajaxSetup () имеет значение true, которым оно является по умолчанию. Примечание. Глобальные события никогда не запускаются для междоменного сценария или JSONP. запросы независимо от значения global.

Источник: http://api.jquery.com/category/ajax/global-ajax-event-handlers/

Answer 3

Это всегда зависит от того, как вы создали свой сайт, но, по моему мнению, активное состояние должно срабатывать только в тот момент, когда вы нажимаете.

Так и должно быть: onmousedown добавить свой класс и onmouseup удалить его.

Вызов Ajax может вызвать другую функцию, которая может отображать диалог загрузки / счетчик.

Существует несколько способов его построения: индивидуально для каждого элемента, как вы это сделали, или с помощью общей функции стиля. То же самое для Ajax с функциями ajaxComplete ajaxStart, как сказал Джаспер.

Лично я интенсивно использую Ajax, всегда динамически меняя DOM, поэтому я использую livequery для автоматической установки изменения стиля с событиями, когда в DOM появляются элементы с заданным классом (классами), а для отображения диалог загрузки.

Answer 4

Вы можете сделать что-то вроде:

$("a.button").click(function() {
    var old_text = $(this).text();
    var button = $(this);
    $(this).text('Processing...');
    $(this).attr('disabled', 'disabled'); // disable to button to make sure it cannot be clicked
    data = ...;
    url = ...;
    $.post(url, data, function() {
        // after request has finished, re-enable the link
        $(button).removeAttr('disabled');
        $(button).text(old_text);
    });
});

Далее, вы должны сделать что-то похожее для отлова ошибок (повторно активировать кнопку).

Answer 5

Использование $.ajax success:

От Документы jquery :

$.ajax({
  url: "test.html",
  success: function(){
    $(this).addClass("done");
  }
});