আমি কীভাবে 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;
            }
        }
    });
});

Comments

একটি পুরানো থ্রেড হতে পারে, তবে @ কোফিফাসটি হিসাবে দেখায় যে অ্যাসিঙ্কটিকে মিথ্যা হিসাবে সেট করা একটি খারাপ নকশা এবং "কোনও সময়সীমা ইত্যাদি প্রক্রিয়াজাত করা হবে না"। এই সরলিকৃত সমাধানটি চেষ্টা করে দেখুন - 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;
            }
        }
    });
});

তবে, আমি নোট করব যে এটি এজেএক্সের পয়েন্টের বিপরীতে হবে। এছাড়াও, আপনার প্রতিক্রিয়াটি কার্য errorএবং successক্রিয়াগুলি পরিচালনা করা উচিত । সার্ভারের কাছ থেকে প্রতিক্রিয়া পাওয়া গেলে এই ফাংশনগুলি ডাকা হবে।

Comments

আমার মতে ভাল অভ্যাসের পাশ দিয়ে যাওয়া বিচার করা হয় না এবং স্ট্যাক ওভারফ্লোতে এখানে বেশ কয়েকটি সেরা উত্তরের চিহ্ন।

— সেম্পেরোস

কখনও ব্যবহার করবেন না async: false। অবিশ্বাস্য নেটওয়ার্ক I / O তে অপেক্ষা করার সময় ব্রাউজারের ইভেন্ট লুপটি স্তব্ধ হয়ে যায়। সবসময় আরও ভাল উপায় আছে। এই ক্ষেত্রে, লিঙ্কটির লক্ষ্য ব্যবহারকারীর সেশনটি এবং লগইন পৃষ্ঠায় 302 টি যাচাই করতে পারে।

— ম্যাথু

পরীক্ষার জন্য, async: falseখুব দরকারী হতে পারে।

— জারেট

@ ম্যাথু সত্যি? অন্যান্য পৃষ্ঠায় ব্যবহারকারীকে প্রেরণ বা রিফ্রেশ করার আগে অ্যাসিঙ্কের সাথে একটি এজ্যাক্স প্রেরণের বিকল্প কী?

— NoBugs

asyncfalseবেশিরভাগ ব্রাউজার ব্যবহারের ক্ষেত্রে মান সহ মূল্যহ্রাস করা হয়। এটি ব্রাউজারগুলির নতুন সংস্করণে ব্যতিক্রম ছুঁড়ে দিতে পারে। Xhr.spec.whatwg.org/#sync-warning দেখুন ( asyncএক্সএইচআর openপদ্ধতির প্যারামিটারে প্রযোজ্য , যা জিকুয়েরি ব্যবহার করে)।

— ফ্রেডেরিক

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 অবরুদ্ধ থাকবে

দেখতে jsfiddle

Comments

অ্যাসিঙ্কটিকে মিথ্যাতে সেট করা কোডের একক লাইন বাদে ঠিক একই জিনিসটি করে না?

— ভিনসেন্ট

একেবারেই না. অ্যাসিঙ্কটিকে মিথ্যা হিসাবে সেট করা অনুরোধটিকে অ্যাসিঙ্ক তৈরি করে - এটি প্রত্যাশিত হওয়া অবধি প্রক্রিয়া বন্ধ করে দেওয়া হয় যা সাধারণত খারাপ অভ্যাস হয়, উদাহরণস্বরূপ কোনও ইভেন্ট, অন্যান্য এজ্যাক্স অনুরোধ, সময়সীমা ইত্যাদি প্রক্রিয়াজাত হবে না। আপনার

— এজাক্স

Answer 5

আমি মনে করি কিছু যদি আপনি আপনার কোড সহজ হবে successপরিবর্তে ফিরে যথাযথ পৃষ্ঠাটি লোড করা ফাংশন trueবা false।

উদাহরণস্বরূপ ফিরে আসার পরিবর্তে trueআপনি এটি করতে পারেন:

window.location="appropriate page";

যখন সাফল্য ফাংশন বলা হয় তখন পৃষ্ঠাটি পুনঃনির্দেশিত হয়।

Answer 6

আধুনিক জেএসে আপনি সহজেই 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ফাংশনে কল করুন "।

— তাওহিদুল ইসলাম

এটি একটি দুর্দান্ত সমাধান তবে দুর্দান্ত সমাধানের সন্ধানে (যেমন আমি ছিলাম) অন্যকে সহায়তা করার জন্য আপনার কোডটি সম্পাদনা করা উচিত এবং এটিকে আরও সম্পূর্ণ উপায়ে দেখানো উচিত। সম্ভবত এমনকি একটি কৌতুক একটি লিঙ্ক অন্তর্ভুক্ত। এইটা চমৎকার হবে!

— পেপেট্রি

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

আপনার সমাধান ব্যাখ্যা করুন।

— 15:44

যোগ করেছেন @ ড্রপআউট।

— হাসান এজাজ

ধন্যবাদ @ হাসান এজাজ! যে উত্তরগুলির কোনও ব্যাখ্যা নেই এবং কেবল কোড রয়েছে এমন উত্তরগুলি নিম্ন প্রচেষ্টা হিসাবে পতাকাঙ্কিত হয়।

— 11-15