jQuery лучший способ заблокировать любые другие процессы в ожидании завершения Ajax

Question

Это jQuery .

У меня есть форма регистрации.В поле текстового поля домена люди заполняют домен, затем onblur Ajax вызывает API регистратора для проверки доступности домена.

Проверка может занять до 15 секунд в зависимости от скорости сети.

Если в этот период ожидания пользователь нажмет кнопку отправки, как его заблокировать?

Моя идея проста: до завершения загрузки любого вызова Ajax я не хочу, чтобы люди нажималипредставить.

Я могу придумать способ, но я не уверен, что это хороший способ.Мне нужен совет.

beforeSend: function(){
    $("#btnSubmit").attr("disabled", "disabled");
},

complete: function(){
    $("#btnSubmit").attr("disabled", "");
}

<input type="button" name="btnSubmit" id="btnSubmit" value="my button" />

Answer 1

Что бы вы ни делали не не используйте async: false в своих вызовах AJAX, особенно потому, что ваш запрос очень продолжителен (15 секунд). Он отключит все Javascript до завершения вызова AJAX.

Твой способ сделать это хорошо. Вы можете обобщить его, используя глобальные обработчики событий AJAX в jQuery. Присвойте каждому соответствующему элементу управления соответствующий класс маркера, например «ajax»:

<input type="button" class="ajax" value="Register Domain">

с:

$(document).ajaxStart(function() {
  $(".ajax").attr("disabled", true);
}).ajaxComplete(function() {
  $(".ajax").removeAttr("disabled");
});

Итак, вы здесь слушаете глобальные события AJAX, и пока они находятся в процессе, вы отключаете все элементы управления, на которые вы не хотите нажимать, пока идет вызов AJAX.

Answer 2

Настройка async на false может работать, но это может полностью повесить браузер на 15 секунд.Лучше всего отключить элемент submit и предотвратить отправку другими способами, используя переменную, в которой хранится информация о том, выполняется ли проверка:

var validating = false;

$(function() {

    $('form').submit(function() {
        if(validating) return false;
        var button = $(this).find('input:submit, input:button');

        button.attr('disabled', 'disabled');
        validating = true;

        $.ajax({
            url: 'validator.php',
            data: $(this).serialize(),
            success: function() {
                validating = false;
                button.removeAttr('disabled');
            }
        });
    });
});

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

Answer 3

Посмотрите на BlockUi .

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

Пример того, как я его использовал

$('#elementtobloack').block({
        centerY: 0,
        message: 'Some useful message'       
    });

 $.ajax(
            {
                type: "POST",
                url: "...",
                data: "{}",
                contentType: "application/json;charset=utf-8",
                dataType: "json",
                success: function(msg) {
                    //do something
                    //unblock your element 
                    $('#elementtoblock').unblock();
                },
                error: function(msg) {
                    //do something on error -- alert(msg.responseText);
                    //unblock on failure as well or the element will remain blocked
                    $('#elementtobloak').unblock();
                }
            });     

Answer 4

Кнопка ввода:

<input typ="submit" value="Register" onsubmit="return ajaxCheck();" />

Код JS:

var onAjax = false;
function ajaxCheck(){
  if(onAjax)
    return false;
  else
    return true;
}


$("element").onblur(function(){
  onAjax = true;
  //whatever you need to do here
  $.ajax({
    //standard params
    success: function(){
      onAjax = false;
    },
    failure: function(){
      onAjax = false;
    }
  });
});

Answer 5

Я сам испытал эту ситуацию. Мой подход заключался в открытии небольшого модального окна с уменьшенным GIF и пояснительным текстом.

Когда вызов Ajax заканчивается, я закрываю модальное окно.

Надеюсь, это поможет.

Answer 6

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

Если пользователь заполняет каждый элемент формы и не может впоследствии нажать кнопку submit (потому что процесс проверки еще продолжается), он / она очень запутывается.

15 секунд - длительное время, поэтому убедитесь, что пользователь знает, что происходит.