Как заставить jQuery ждать завершения вызова Ajax до его возврата?

Question

Как заставить jQuery ждать завершения вызова Ajax до его возврата?

189

У меня есть функция на стороне сервера, которая требует входа. Если пользователь вошел в систему, функция вернет 1 при успешном завершении. Если нет, функция вернет страницу входа.

Я хочу вызвать функцию с помощью Ajax и jQuery. То, что я делаю, представляет запрос с помощью обычной ссылки с применением функции click-function. Если пользователь не вошел в систему или функция не работает, я хочу, чтобы Ajax-call возвращал true, чтобы триггеры href.

Однако, когда я использую следующий код, функция завершается перед вызовом Ajax.

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

$(".my_link").click(
    function(){
    $.ajax({
        url: $(this).attr('href'),
        type: 'GET',
        cache: false,
        timeout: 30000,
        error: function(){
            return true;
        },
        success: function(msg){ 
            if (parseFloat(msg)){
                return false;
            } else {
                return true;
            }
        }
    });
});

Hobhouse 16 апр. 2009, в 13:59

Источник

1

Возможно, это старая ветка, но, как указывает @kofifus, установка асинхронного значения на false - плохой дизайн, и «никакие тайм-ауты и т.д. не будут обрабатываться». Можно попробовать это упрощенное решение - stackoverflow.com/a/11576418/6937841
Shan 28 июнь 2017, в 18:47

Теги:

jquery

ajax

5 ответов

30

Я не использую $.ajax, а функции $.post и $.get, поэтому, если мне нужно ждать ответа, я использую это:

$.ajaxSetup({async: false});
$.get("...");

blackhatmario 15 май 2012, в 08:29

0

Это работает и для $ .getJSON () ... что имеет смысл
Mark B 10 авг. 2012, в 21:08

27

Основной объект XMLHttpRequest (используемый jQuery для запроса) поддерживает асинхронное свойство. Установите значение false. Как

async: false

idrosid 16 апр. 2009, в 12:40

15

Вместо установки async на false, который обычно является плохим дизайном, вам может потребоваться блокировка пользовательского интерфейса при ожидании операции.

Это может быть достигнуто с помощью jQuery promises следующим образом:

// same as $.ajax but settings can have a maskUI property
// if settings.maskUI==true, the UI will be blocked while ajax in progress
// if settings.maskUI is other than true, it value will be used as the color value while bloking (i.e settings.maskUI='rgba(176,176,176,0.7)'
// in addition an hourglass is displayed while ajax in progress
function ajaxMaskUI(settings) {
    function maskPageOn(color) { // color can be ie. 'rgba(176,176,176,0.7)' or 'transparent'
        var div = $('#maskPageDiv');
        if (div.length === 0) {
            $(document.body).append('<div id="maskPageDiv" style="position:fixed;width:100%;height:100%;left:0;top:0;display:none"></div>'); // create it
            div = $('#maskPageDiv');
        }
        if (div.length !== 0) {
            div[0].style.zIndex = 2147483647;
            div[0].style.backgroundColor=color;
            div[0].style.display = 'inline';
        }
    }
    function maskPageOff() {
        var div = $('#maskPageDiv');
        if (div.length !== 0) {
            div[0].style.display = 'none';
            div[0].style.zIndex = 'auto';
        }
    }
    function hourglassOn() {
        if ($('style:contains("html.hourGlass")').length < 1) $('<style>').text('html.hourGlass, html.hourGlass * { cursor: wait !important; }').appendTo('head');
        $('html').addClass('hourGlass');
    }
    function hourglassOff() {
        $('html').removeClass('hourGlass');
    }

    if (settings.maskUI===true) settings.maskUI='transparent';

    if (!!settings.maskUI) {
        maskPageOn(settings.maskUI);
        hourglassOn();
    }

    var dfd = new $.Deferred();
    $.ajax(settings)
        .fail(function(jqXHR, textStatus, errorThrown) {
            if (!!settings.maskUI) {
                maskPageOff();
                hourglassOff();
            }
            dfd.reject(jqXHR, textStatus, errorThrown);
        }).done(function(data, textStatus, jqXHR) {
            if (!!settings.maskUI) {
                maskPageOff();
                hourglassOff();
            }
            dfd.resolve(data, textStatus, jqXHR);
        });

    return dfd.promise();
}

с этим вы можете теперь:

ajaxMaskUI({
    url: url,
    maskUI: true // or try for example 'rgba(176,176,176,0.7)'
}).fail(function (jqXHR, textStatus, errorThrown) {
    console.log('error ' + textStatus);
}).done(function (data, textStatus, jqXHR) {
    console.log('success ' + JSON.stringify(data));
});

И пользовательский интерфейс будет блокироваться до тех пор, пока команда ajax не вернет

см. jsfiddle

kofifus 06 фев. 2015, в 04:40

0

Разве установка async в false не делает то же самое, кроме одной строки кода?
Vincent 19 дек. 2015, в 22:51
3

Не за что. Если для параметра async установлено значение false, запрос будет асинхронным - то есть остановка обработки до тех пор, пока он не вернется, что обычно является плохой практикой, например, никакие события, другие запросы ajax, таймауты и т. Д. Не будут обрабатываться. Вы также можете изменить приведенный выше код, чтобы заблокировать только часть пользовательского интерфейса во время обработки вашего ajax (то есть части, на которую он повлияет)
kofifus 27 дек. 2015, в 06:49

9

Я думаю, что было бы проще, если бы вы закодировали свою функцию success для загрузки соответствующей страницы вместо возврата true или false.

Например, вместо возврата true вы можете сделать:

window.location="appropriate page";

Таким образом, когда функция успеха называется страницей, перенаправляется страница.

samuelagm 27 окт. 2011, в 03:36

Ещё вопросы

Возможно, это старая ветка, но, как указывает @kofifus, установка асинхронного значения на false - плохой дизайн, и «никакие тайм-ауты и т.д. не будут обрабатываться». Можно попробовать это упрощенное решение - stackoverflow.com/a/11576418/6937841
Это работает и для $ .getJSON () ... что имеет смысл
Разве установка async в false не делает то же самое, кроме одной строки кода?
Не за что. Если для параметра async установлено значение false, запрос будет асинхронным - то есть остановка обработки до тех пор, пока он не вернется, что обычно является плохой практикой, например, никакие события, другие запросы ajax, таймауты и т. Д. Не будут обрабатываться. Вы также можете изменить приведенный выше код, чтобы заблокировать только часть пользовательского интерфейса во время обработки вашего ajax (то есть части, на которую он повлияет)

altCognito · Accepted Answer · 2009-04-16T14-05-00.000Z

269

Лучший ответ

Если вы не хотите, чтобы функция $.ajax() возвращалась немедленно, установите для параметра async значение false:

$(".my_link").click(
    function(){
    $.ajax({
        url: $(this).attr('href'),
        type: 'GET',
        async: false,
        cache: false,
        timeout: 30000,
        error: function(){
            return true;
        },
        success: function(msg){ 
            if (parseFloat(msg)){
                return false;
            } else {
                return true;
            }
        }
    });
});

Но я бы отметил, что это будет противоречить точке AJAX. Кроме того, вы должны обрабатывать ответ в функциях error и success. Эти функции будут вызываться только тогда, когда ответ получен с сервера.

altCognito 16 апр. 2009, в 14:05

1

Вы имеете в виду ложь :) Я думаю?
veggerby 16 апр. 2009, в 12:32
0

Хах! Да, спасибо.
cgp 16 апр. 2009, в 12:33
10

Передача хороших практик, на мой взгляд, не является оценкой, и является признаком одних из лучших ответов здесь, на StackOverflow.
semperos 01 авг. 2011, в 14:14
59

Никогда не используйте async: false . Цикл событий браузера будет зависать при ожидании ненадежного сетевого ввода-вывода. Всегда есть лучший способ. В этом случае цель ссылки может подтвердить сеанс пользователя и 302 на страницу входа.
Matthew 14 дек. 2011, в 01:58
2

Для тестирования async: false может быть очень полезным.
Jarrett 09 сен. 2013, в 20:14
0

Это действительно круто ...
user3087089 06 фев. 2014, в 00:13
0

Где ты был всю мою жизнь?
Mkl Rjv 15 окт. 2014, в 15:43
4

@ Мэтью Правда? Какая альтернатива отправке ajax с async перед отправкой пользователя на другую страницу или обновлением?
NoBugs 15 окт. 2014, в 18:10
0

@NoBugs: всегда возвращайте false в обработчике кликов, а в случае успешного обратного вызова перейдите туда, куда он должен идти.
Frédéric 21 апр. 2015, в 11:05
1

async со значением false устарел в большинстве случаев использования браузера. Это может вызвать исключения в более новой версии браузеров. См. Xhr.spec.whatwg.org/#sync-warning (применяется к параметру async open метода xhr, который использует jQuery).
Frédéric 21 апр. 2015, в 11:06
0

@Frederic Во-первых, return false не рекомендуется , во-вторых, если вы предотвращаете дефолт по поведению в браузере, вы должны обрабатывать такие события для всех ссылок или кода, выполняющего навигацию по страницам. (и ожидание некоторого количества времени, в течение которого выполняется предварительный запуск ajax-страницы, по сути та же проблема, о которой говорит Матвей. Если ajax никогда не завершится, он не перейдет на другую страницу.
NoBugs 23 апр. 2015, в 13:58
0

@NoBugs, да, я знаю, что return false не является лучшей практикой в контексте событий jQuery, но я просто придерживался того, чем занимается сам практикующий оператор. Короче говоря, я не думаю, что в этом суть. И да, то, что опер хочет сделать, имеет недостатки, о которых вы заявляете, это не относится к тому, что я предложил.
Frédéric 23 апр. 2015, в 16:11
1

Обратите внимание, что async: false не поддерживает междоменные и jsonp запросы.
Steve 15 сен. 2015, в 19:05
1

@ Матфей после обсуждения с нашим техническим руководителем, я склонен согласиться с его рекомендацией немного пересмотреть ваше утверждение. Почти никогда не используйте async: false . Всегда есть крайние случаи, когда это может иметь смысл.
w00ngy 06 авг. 2018, в 15:52

Показать ещё 12 комментариев