Question

我有一个需要登录的服务器端功能。如果用户已登录，则该功能将在成功时返回1。如果没有，该函数将返回登录页面。

我想使用Ajax和jQuery调用该函数。我所做的是使用普通链接提交请求，并在其上应用单击功能。如果用户未登录或函数失败，我希望Ajax调用返回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;
            }
        }
    });
});

Answer 1

如果您不希望$.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函数中处理响应。只有在从服务器收到响应时才会调用这些函数。

Answer 2

我没有使用$.ajax，而是使用$.post和$.get函数，所以如果我需要等待响应，我会使用它：

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

Answer 3

底层的XMLHttpRequest对象（由jQuery用来发出请求）支持异步属性。将其设置为 false 。喜欢

async: false

Answer 4

您可能需要考虑在操作未决时阻止UI，而不是将async设置为false（通常是错误的设计）。

这可以通过jQuery承诺很好地实现，如下所示：

// 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's 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));
});

UI将阻塞，直到ajax命令返回

请参阅jsfiddle

Answer 5

如果您对success函数进行编码以加载相应的网页而不是返回true或false，我认为事情会更容易。

例如，您可以执行以下操作而不是返回true：

window.location="appropriate page";

这样，当调用成功函数时，页面会被重定向。

Answer 6

在现代JS中，您可以简单地使用async / await，例如：

  async function upload() {
    return new Promise((resolve, reject) => {
        $.ajax({
            url: $(this).attr('href'),
            type: 'GET',
            timeout: 30000,
            success: (response) => {
                resolve(response);
            },
            error: (response) => {
                reject(response);
            }
        })
    })
}

然后在async函数中调用它，例如：

let response = await upload();

Answer 7

因为我在这里没有看到它，所以我想我还要指出jQuery when语句对于此目的非常有用。

他们的示例如下：

$.when( $.ajax( "test.aspx" ) ).then(function( data, textStatus, jqXHR ) {
  alert( jqXHR.status ); // Alerts 200
});

“那么”部分要等到“时间”部分完成后才能执行。

Answer 8

它应该等到获取请求完成。之后，我将从调用函数的位置返回get请求正文。

function foo() {
    var jqXHR = $.ajax({
        url: url,
        type: 'GET',
        async: false,
    });
    return JSON.parse(jqXHR.responseText);  
}

Answer 9

由于不赞成使用异步Ajax，请尝试使用带有Promise的嵌套异步函数。可能有语法错误。


async function fetch_my_data(_url, _dat) {

   async function promised_fetch(_url, _dat) {

      return new Promise((resolve, reject) => {
         $.ajax({
            url:  _url,
            data: _dat,
            type: 'POST',
            success: (response) => {
               resolve(JSON.parse(response));
            },
            error: (response) => {
               reject(response);
            }
         });
      });
   }

   var _data = await promised_fetch(_url, _dat);
   
   return _data;
}

var _my_data = fetch_my_data('server.php', 'get_my_data=1');

如何使jQuery在返回之前等待Ajax调用完成？

9 个答案: