Comment faire pour que jQuery attende qu'un appel Ajax se termine avant qu'il ne retourne?

Question

J'ai une fonction côté serveur qui nécessite une connexion. Si l'utilisateur est connecté, la fonction retournera 1 en cas de succès. Sinon, la fonction retournera la page de connexion.

Je souhaite appeler la fonction en utilisant Ajax et jQuery. Ce que je fais est soumettre la demande avec un lien ordinaire, avec une fonction de clic appliquée sur elle. Si l'utilisateur n'est pas connecté ou si la fonction échoue, je souhaite que l'appel Ajax renvoie true, afin que le href se déclenche. Toutefois, lorsque j'utilise le code suivant, la fonction se ferme avant que l'appel Ajax soit terminé.

Comment puis-je rediriger l'utilisateur vers la page de connexion?

$(".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

Si vous ne voulez pas la fonction $.ajax() pour revenir immédiatement, réglez l'option 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; 
      } 
     } 
    }); 
}); 

Mais, je constate que ce serait contraire au point d'AJAX. En outre, vous devez gérer la réponse dans les fonctions error et success. Ces fonctions ne seront appelées que lorsque la réponse sera reçue du serveur.

Answer 2

L'objet XMLHttpRequest sous-jacent (utilisé par jQuery pour effectuer la requête) prend en charge la propriété asynchrone . Réglez-le sur false. Comme

async: false 

Answer 3

Je pense que les choses seraient plus faciles si vous codez votre fonction success pour charger la page appropriée au lieu de retourner true ou false.

Par exemple au lieu de retourner true que vous pourriez faire:

window.location="appropriate page"; 

De cette façon, lorsque la fonction de la réussite est la page est redirigé.

Answer 4

Je n'utilise pas $.ajax mais les fonctions $.post et $.get, donc si je dois attendre la réponse, j'utilise ceci:

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

Answer 5

Au lieu de définir async false qui est la conception généralement mauvais, vous peut vouloir envisager de bloquer l'interface utilisateur pendant que l'opération est en attente.

Ceci peut être réalisé bien avec jQuery promet comme suit:

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

avec cela, vous pouvez faire:

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)); 
}); 

Et l'interface utilisateur permet de bloquer jusqu'à ce que la commande retourne ajax

Voir jsfiddle