Ajax не ждет вызова

Question

У меня есть форма, когда мои пользователи нажимают «отправить», я сначала хочу проверить, занято ли выбранное ими имя пользователя.Для этого я использую ajax:

function submit() {
    if (userNameTaken()) {
        alert("Please choose a username that is not already in use.");
        return false;
    }
}

function userNameTaken() {
    var taken = false;
    var username = $("#username").val();
    $.get("username_used.cgi", { "username": username }, function(data) {
        taken = data > 0;
    });
    return taken;
}

Так что я знаю, что когда берется имя пользователя, функция userNameTaken() возвращает true.

Однако форма сохраняется в любом случае почти так, как если бы javascript не приостанавливал и не ждал завершения этого вызова ajax, а вместо этого продолжает работать и оценивать.Любые идеи о том, как решить эту проблему, так что моя форма будет ждать этого вызова ajax и не будет отправлять?

Answer 1

Вы не можете возвращать данные из Ajax-вызова следующим образом: Ajax-вызовы возвращаются в произвольные моменты времени в будущем, в то время как вызов userNameTaken() возвращается (по существу) немедленно, безусловно, до завершения Ajax-запроса.

Вы можете сделать вызов синхронным, рискуя заблокировать пользовательский интерфейс браузера. ИМО это не является предпочтительным.

В качестве альтернативы разрешить отправку можно только в том случае, если имя не используется: используйте функцию обратного вызова, чтобы установить флаг «ОК», или активируйте кнопку отправки, или откройте предупреждение, или ...

FWIW, я нахожу всплывающие оповещения очень разрушительными и противоречащими гладкому UX.

Answer 2

Вам необходимо установить «асинхронную» настройку вызова Ajax на «ложь». Это заставит функцию блокироваться, пока вызов не вернется.

Вот ссылка на документацию JQuery. Проверьте настройку «асинхронный»: http://api.jquery.com/jQuery.ajax/

Answer 3

потому что Ajax не будет выполняться в обычном нисходящем процессе. И представить не будет ждать ответа AJAX. вы можете использовать normal button вместо submit button, чтобы вы могли отправить форму вручную.

<form ... >
// other parts

<input type="button" value="sumbit" onclick="userNameTaken();"/>
</form>

изменить код как

function userNameTaken() {
    var username = $("#username").val();
    $.get("username_used.cgi", { "username": username }, function(data) {
       if(data > 0){
          alert("Please choose a username that is not already in use.");
        }else{
            // validation goes here
           $('form').submit(); 
        }
    });
}

Таким образом, он проверит ответ ajax и затем отправит форму, если имя пользователя не используется, покажет предупреждение. Вы можете поместить некоторый идентификатор в кнопку и форму, чтобы обрабатывать это легко, используя jquery ..