वापस आने से पहले मैं Ajax कॉल के लिए jQuery की प्रतीक्षा कैसे करूँ?

Question

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

मैं अजाक्स और jQuery का उपयोग करके फ़ंक्शन को कॉल करना चाहता हूं। मैं क्या करता हूं एक साधारण लिंक के साथ अनुरोध सबमिट करें, इस पर क्लिक-फ़ंक्शन के साथ। यदि उपयोगकर्ता लॉग इन नहीं है या फ़ंक्शन विफल रहता है, तो मैं चाहता हूं कि अजाक्स-कॉल सही लौटे, ताकि 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;
            }
        }
    });
});

Comments

एक पुराना धागा हो सकता है, लेकिन जैसा कि @kofifus बताते हैं कि async को झूठी स्थापित करना एक बुरा डिज़ाइन है और "कोई टाइमआउट आदि संसाधित नहीं होगा"। इस सरलीकृत समाधान की कोशिश कर सकते हैं - stackoverflow.com/a/11576418/6937841

— शान

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कार्यों में प्रतिक्रिया को संभालना चाहिए । उन कार्यों को केवल तभी कहा जाएगा जब सर्वर से प्रतिक्रिया प्राप्त होगी।

Comments

मेरी राय में, अच्छी प्रथाओं के साथ गुजरना, न्याय नहीं कर रहा है, और स्टैकऑवरफ्लो पर यहां कुछ बेहतरीन जवाबों के निशान हैं।

— 14

कभी उपयोग न करें async: false। अविश्वसनीय नेटवर्क I / O पर प्रतीक्षा करते समय ब्राउज़र का ईवेंट लूप लटका रहेगा। हमेशा एक बेहतर तरीका है। इस स्थिति में, लिंक का लक्ष्य उपयोगकर्ता सत्र और 302 लॉगिन पृष्ठ पर सत्यापित कर सकता है।

— मैथ्यू

परीक्षण के लिए, async: falseबहुत उपयोगी हो सकता है।

— जारेट्ट

@ मैथ्यू सच में? उपयोगकर्ता को अन्य पेज पर भेजने से पहले या ताज़ा करने के लिए एसिंक्स के साथ अजाक्स भेजने का विकल्प क्या है?

— NoBugs

asyncfalseअधिकांश ब्राउज़र उपयोग मामलों में मान को हटा दिया गया है। यह ब्राउज़रों के नए संस्करण में अपवादों को फेंक सकता है। Xhr.spec.whatwg.org/#sync-warning देखें ( asyncxhr openपद्धति के पैरामीटर पर लागू होता है , जो कि jQuery का उपयोग करता है)।

— Frédéric

Answer 2

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

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

Answer 3

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

async: false

Answer 4

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

यह 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 देखें

Comments

कोड की एकल पंक्ति को छोड़कर सटीक समान कार्य को करने के लिए async सेट नहीं करता है?

— विंसेंट

हर्गिज नहीं। Async को गलत करने के लिए अनुरोध करने पर async - वह तब तक प्रसंस्करण होता है जब तक कि वह वापस नहीं आ जाता है जो कि आमतौर पर बुरा अभ्यास होता है, उदाहरण के लिए कोई घटना नहीं, अन्य ajax अनुरोध, टाइमआउट आदि संसाधित किए जाएंगे। आप ऊपर दिए गए कोड को यूआई के केवल भाग को ब्लॉक करने के लिए भी संशोधित कर सकते हैं, जबकि आपका

— एजैक्स

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

Comments

आपका कोड काम नहीं करेगा ... आप सही रास्ते पर हैं, लेकिन जैसा कि यह है, यह काम नहीं करेगा।

— पपेट्री

क्या आप कृपया अधिक विस्तृत कर सकते हैं? कोड का परीक्षण करने के बाद मैंने इस प्रश्न का उत्तर दिया है, इसे काम करना चाहिए।

— तौहीदुल इस्लाम

इंतजार async समारोह के बाहर इस्तेमाल नहीं किया जा सकता है, यह एक त्रुटि फेंकता है।

— पपेट्री

हां, मैंने अपने उत्तर की दूसरी अंतिम पंक्ति में इसका उल्लेख किया है, "फिर इसे एक asyncफ़ंक्शन में कॉल करें "।

— ताओहिदुल इस्लाम

यह एक महान समाधान है, लेकिन एक महान समाधान की तलाश में दूसरों की मदद करने के लिए (जैसे मैं था), आपको अपने कोड को संपादित करना चाहिए और इसे और अधिक पूर्ण तरीके से दिखाना चाहिए। शायद एक बेला के लिए लिंक भी शामिल है। वह तो जबर्दस्त होगा!

— पपेट्री

Answer 7

जब से मैं नहीं दिख रहा है यह यहाँ उल्लेख मैंने सोचा कि मैं यह भी कहा कि jQuery का कहना था जब बयान इस उद्देश्य के लिए बहुत उपयोगी हो सकता है।

उनका उदाहरण इस प्रकार है:

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

"तब" भाग तब तक निष्पादित नहीं होगा जब तक कि "जब" भाग समाप्त न हो जाए।

Answer 8

यह अनुरोध पूरा होने तक इंतजार करना चाहिए। उसके बाद मैं रिक्वेस्ट बॉडी लाऊँगा जहाँ से फंक्शन कहा जाता है।

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

Comments

कृपया अपना समाधान बताएं।

— ड्रॉपआउट

@ जोड़ा गया।

— हसन एजाज़

धन्यवाद @ हसन एजाज़! जिन उत्तरों में स्पष्टीकरण नहीं है और केवल कोड को कम प्रयास के रूप में चिह्नित किया गया है।

— ड्रॉपआउट