jQuery ne fait pas d'appel asynchrone evel async:false spécifié

Question

Voici mon code

var jsonpath;

function loginFromDef() {

    var a = grantAccess($('#login :input').serialize());
    if (a.Msg) {
        $('#msg').html(a.Msg).attr('class', 'error');
    }
    else if (a.done) {
        var returnUrl = getQueryString('ReturnURL');
        if (returnUrl)
            window.location = returnUrl;
        else
            window.location = 'Home.aspx';
    }

    return false;
}

function grantAccess(dataToPost) {

    $.ajax({
        type: "POST",
        url: jsonpath + 'Json.ashx?method=GrantAccess',
        async: false,
        data: dataToPost,
        success: function (data) {
            return data;
        }
    });
}

function getQueryString(name) {
    var match = RegExp('[?&]' + name + '=([^&]*)').exec(window.location.search);
    return match && decodeURIComponent(match[1].replace(/\+/g, ' '));
}

var jsonPath est défini dans la page Default.aspx d'où j'appelle la fonction loginFromDef() en onclick du bouton d'envoi.

Je reçois une erreur TypeError: a is undefined Ne t'inquiète pas pour mon .ashx handler. Il fonctionne bien. Je le testerais.

Je pense var a en fonction loginFromDef n'est pas initialisé. Parce que may be jQuery is making asynchronous call. Even I have set async:false dans les options.

Qu'est-ce qui ne va pas chez moi ? Veuillez suggérer une solution à ce problème.

Answer 1

Vous n'avez pas d'instruction de retour dans grantAccess . L'instruction de retour à l'intérieur de la callback n'a pas d'effet (puisqu'elle est appelée par la fonction $.ajax en interne).

L'appel Ajax es synchrone, mais vous ne retournez pas de données à partir de grantAccess .

Vous pourriez le faire :

return $.ajax({
    type: "POST",
    url: jsonpath + 'Json.ashx?method=GrantAccess',
    async: false,
    data: dataToPost,
}).responseText;

Peut-être que vous devez utiliser $.parseJSON avant de retourner cette valeur.

$.ajax renvoie un jqXHR pour lequel vous pouvez trouver plus d'informations dans l'onglet documentation .

Cependant, je fortement suggère de ne pas utiliser d'appels Ajax synchrones et je ne vois pas pourquoi vous en auriez besoin ici. Une requête synchrone peut potentiellement bloquer le navigateur (y compris son interface utilisateur) jusqu'à ce que la réponse soit reçue, rendant le navigateur non réactif, ce qui conduit à une mauvaise expérience d'utilisation.

Modifiez votre code afin de pouvoir utiliser des callbacks pour gérer la réponse. Par exemple :

function loginFromDef() {

    grantAccess($('#login :input').serialize()).done(function(a) {
        if (a.Msg) {
            $('#msg').html(a.Msg).attr('class', 'error');
        }
        else if (a.done) {
            var returnUrl = getQueryString('ReturnURL');
            if (returnUrl)
                window.location = returnUrl;
            else
                window.location = 'Home.aspx';
        }
    });

    return false;
}

donde grantAccess renvoie simplement le jqXHR retourné par $.ajax :

function grantAccess(dataToPost) {
    return $.ajax({
        type: "POST",
        url: jsonpath + 'Json.ashx?method=GrantAccess',
        data: dataToPost
    });
}

Answer 2

Votre grantAccess retourne la fonction après l'appel AJAX. Puisque vous ne spécifiez pas de retour pour la fonction grantAccess il renvoie implicitement undefined .

Vous êtes success renvoie alors la fonction data à sa variable appelant qui se trouve quelque part dans le code de jQuery.

Answer 3

Le problème se situe au niveau de la success de votre appel Ajax.

function grantAccess(dataToPost) {
    $.ajax({
        type: "POST",
        url: jsonpath + 'Json.ashx?method=GrantAccess',
        async: false,
        data: dataToPost,
        success: function (data) {
            return data;
        }
    });
}

La fonction de réussite est différente de la fonction GrantAccess. GrantAccess ne renvoie pas de valeur, d'où la ligne suivante :

var a = grantAccess($('#login :input').serialize());

sera toujours aboutir à a être null .

Ce que vous devez faire est le suivant :

function loginFromDef() {

    grantAccess($('#login :input').serialize());
}

function grantAccess(dataToPost) {

    $.ajax({
        type: "POST",
        url: jsonpath + 'Json.ashx?method=GrantAccess',
        async: false,
        data: dataToPost,
        success: TheFollowUpFunction(data)
    });
}

    //NEWLY ADDED:

    function TheFollowUpFunction(a) {

        if (a.Msg) {
            $('#msg').html(a.Msg).attr('class', 'error');
     }
    else if (a.done) {
         var returnUrl = getQueryString('ReturnURL');
          if (returnUrl)
            window.location = returnUrl;
          else
            window.location = 'Home.aspx';
    }

    }