मैं AJAX कॉल को लौटने से पहले समाप्त करने के लिए jQuery प्रतीक्षा कैसे करूं?

Question

मेरे पास एक सर्वर साइड फ़ंक्शन है जिसके लिए लॉगिन की आवश्यकता है। यदि उपयोगकर्ता फ़ंक्शन में लॉग इन है तो सफलता पर 1 वापस आ जाएगा। यदि नहीं, तो फ़ंक्शन लॉगिन पृष्ठ लौटाएगा।

मैं अजाक्स और jQuery का उपयोग करके फ़ंक्शन को कॉल करना चाहता हूं। मैं जो करता हूं वह एक सामान्य लिंक के साथ अनुरोध जमा करता है, जिसमें एक क्लिक-फ़ंक्शन लागू होता है। यदि उपयोगकर्ता लॉग इन नहीं है या फ़ंक्शन विफल रहता है, तो मैं अजाक्स-कॉल को वापस लौटना चाहता हूं, ताकि href ट्रिगर हो।

हालांकि, जब मैं निम्नलिखित कोड का उपयोग करता हूं, तो अजाक्स कॉल करने से पहले फ़ंक्शन निकलता है।

मैं उपयोगकर्ता को लॉगिन पेज पर गर्व से कैसे रीडायरेक्ट कर सकता हूं?

$(".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() समारोह तुरंत वापस जाने के लिए नहीं करना चाहते हैं, false को async विकल्प सेट:

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

अंतर्निहित XMLHttpRequest ऑब्जेक्ट (अनुरोध करने के लिए jQuery द्वारा उपयोग किया जाता है) असीमित संपत्ति का समर्थन करता है। इसे पर सेट करें।

async: false 

Answer 3

की तरह मुझे लगता है कि चीजों को आसान हो सकता है अगर आप के बजाय true या false लौटने के उपयुक्त पेज लोड करने के लिए अपने success समारोह कोड।

बजाय लौटने का उदाहरण के लिए true तुम कर सकते हो:

window.location="appropriate page"; 

इस तरह जब सफलता समारोह पेज रीडायरेक्ट कर दिया जाता कहा जाता है।

Answer 4

मैं $.ajax लेकिन $.post और $.get कार्यों उपयोग नहीं कर रहा है, इसलिए यदि मैं प्रतिक्रिया के लिए प्रतीक्षा करने की आवश्यकता है, मैं इस का उपयोग करें: गलत पर async स्थापित करने के बजाय

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

Answer 5

जो आम तौर पर बुरा डिजाइन है, आप ऑपरेशन लंबित होने पर यूआई को अवरुद्ध करने पर विचार करना चाह सकता है।

यह अच्छी तरह से 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)); 
}); 

और यूआई ajax आदेश रिटर्न जब तक अवरुद्ध कर देगा

देखें jsfiddle