Ajax и Preventing Double "отправляют"

Question

Я имею дело с унаследованным приложением, в котором они используют теги [a] для многих «представлений» формы Ajax. Если бы мы использовали кнопки [input], мы могли бы просто установить атрибут disable тега [input]. Но по гиперссылкам отключение не является частью спецификации и не совместимо с кросс-браузерными.

Мы ищем простое решение для блокировки лишних кликов по гиперссылке.

Примечание: мы используем JavaScript с jQuery

Answer 1

решение womp - очень и очень тщательный способ.

Однако, если вы хотите что-то немного проще, я бы, вероятно, реализовал семафор . Просто установите флаг «отправки» и проверьте, установлен ли семафор, когда пользователь нажимает на ссылку. Вы можете сделать это, установив флаг на самом объекте DOM, или использовать глобальное логическое значение.

$('#link').each(function() {
    this.submitting = false;
}).click(function() {
    if (!this.submitting)
    {
        this.submitting = true;
        var self = this;
        $.ajax({
             success: function() {
                 self.submitting = false;
             },
             error:  function() {
                 self.submitting = false; // make sure they can try again
             }
        });
    }
});

Я явно сократил вызов $ .ajax, но я думаю, вы поняли.

Редактировать: Э-э ... на самом деле, забыл самую важную часть. Если (! Отправка).

Answer 2

В вашем обработчике "click" либо верните false, либо запретите значение по умолчанию -

$('#target').click(function(e) {
  e.preventDefault();
  alert('Handler for .click() called.');
});

$('#target').click(function(e) {
  alert('Handler for .click() called.');
  return false;
});

Hmm ... чтобы позволить нажатие кнопки только один раз (на протяжении всей жизни страницы), а затем возможно ее использованиеdata () -

http://api.jquery.com/data/

Или переключить атрибут.

Answer 3

Мне нравится процедура Бена Наделя для обработки этого .

По сути, вы создаете оболочку вокруг функции jQuery .ajax, и вы можете встроить все, что происходит для каждого ajaxзапрос в вашем приложении.Одной из таких вещей является отслеживание запросов.

Вы увидите, что в его getJSON методе-обертке он принимает необязательный параметр "name" для имени запроса.Это может быть что угодно, это просто ключ для определения источника запроса.В вашем случае он будет предоставляться при каждом нажатии ссылки.Если параметр name существует, он сохраняет его в коллекции отслеживания.

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

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

Answer 4

Для всех событий, запускающих ajax-вызов, рекомендуется добавить загрузочный слой на родительский компонент или на всю страницу из первых рук, чтобы предотвратить новый триггер события, а с другой стороны, сообщить пользователю, что данные загрузки в процессе. Вы можете сделать это с помощью jQuery BlockUI Plugin , например, который очень прост в реализации

Answer 5

Что происходит, когда по этим ссылкам выполняется запрос ajax? Если это так, вы можете посмотреть на это

http://www.protofunc.com/scripts/jquery/ajaxManager3/ (не является версией 3.05 в хранилище, которое вы можете захотеть взять).

У этого есть опция, чтобы остановить двойные запросы ajax.

Также вы можете посмотреть на

http://jquery.malsup.com/block/

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

Answer 6

var fooObj = {
    isAdd : true,
    add : function(){
        if(fooObj.isAdd == true){
            fooObj.isAdd = false;
            var opt = {
                url : 'http://yoururl.com',
                type : 'post',
                success : function(response){
                    if(response=='save'){
                        fooObj.isAdd = true;
                    }
                }
            }
            $.ajax(opt);    
        }
    }
}

Я думаю, что это работает. Я также замечаю, что IE Browser медленно реагирует на использование ajax.