Как запретить переход по ссылке во время выполнения запроса ajax?

У меня есть элемент "a", который серверы как кнопка. У него нет атрибута href.

Я использую jQuery для очень простой вещи: при нажатии запускает запрос ajax и предотвращает дальнейшие щелчки. После завершения работы ajax включите щелчок. Я не использую форму или кнопку ввода.

var contact= {
    send: function() {
        $.ajax({
            type: "POST",
            url: "ws/ContactService.asmx/SendEmail",
            data: '{"fromEmail":"' + $("#email").val() + '", "fromName":"' + $('#name').val() + '", "subject":"' + $('#subject').val() + '", "message":"' + $('#message').val() + '"}',
            contentType: "application/json; charset=utf-8",
            dataType: "json",

            error: function() {

                alert("Error");

            },
            success: function(msg) {
                alert(msg.d);
            },
            complete: function() {
            $("#send").text("Send");

            }
        });
    }
};
$(document).ready(function() {
    $("#send").("click", function() {
        $("#send").text("Sending...");       
        contact.send();
    });
}
);

Это работает нормально, за исключением того, что я могу нажимать «Отправить» столько раз, сколько хочу, и каждый щелчок будет генерировать новый запрос ajax. Как предотвратить клики по элементу «a» во время выполнения запроса ajax?

Как конвертировать HTML в PDF с помощью jsPDF
Как конвертировать HTML в PDF с помощью jsPDF
В этой статье мы рассмотрим, как конвертировать HTML в PDF с помощью jsPDF. Здесь мы узнаем, как конвертировать HTML в PDF с помощью javascript.
2
0
419
3

Ответы 3

Используйте один из этих методов, возвращая ссылку, когда возвращается вызов ajax.

Вы можете использовать что-то вроде этого:

var contact = {
  inprogress: false,
  send: function() {
     if (contact.inprogress)
       return;

     contact.inprogress = true;
     $.ajax({
       ...
       complete: function() {
         $("#send").text("Send");
         contact.inprogress = false;
       }
     });
  }
};

Или установите async на false, это заморозит страницу до завершения запроса.

Обычно это плохо воспринимается пользователем, особенно если запрос занимает некоторое время.

icktoofay 10.07.2010 07:45

Другие вопросы по теме