jquery - retour de la valeur en utilisant le résultat d'ajax en cas de succès

Question

J'ai un petit problème avec jQuery $.ajax() fonction.

J'ai un formulaire où chaque clic sur le bouton radio ou la sélection dans le menu déroulant crée une variable de session avec la valeur sélectionnée.

Maintenant - j'ai un des menus déroulants qui a 4 options - la première (avec l'étiquette None) a un value="" les autres ont leurs identifiants.

Ce que je veux, c'est que l'option None (avec une valeur vide) supprime la session et que l'autre en crée une, mais seulement si la session avec ce nom de sélection spécifique n'existe pas déjà - car toutes les autres options ont le même montant qui leur est attribué - cela indique simplement laquelle a été sélectionnée.

Je ne suis pas sûr que cela ait un sens - mais jetez un coup d'œil au code - peut-être que cela sera plus clair :

$("#add_ons select").change(function() {
        // get current price of the addons
        var order_price_addon = $(".order_price_addon").text();
        // get price of the clicked radio button from the rel attribute
        var add = $(this).children('option').attr('label');
        var name = $(this).attr('name');
        var val = $(this).val();

        if(val == "") {
            var price = parseInt(order_price_addon) - parseInt(add);
            removeSession(name);
        } else {
            if(isSession(name) == 0) {
                var price = parseInt(order_price_addon) + parseInt(add);
            }   
            setSession(name, val);              
        }

        $(".order_price_addon").html(price);    
        setSession('order_price_addon', price);         
        updateTotal();
});

donc - tout d'abord, lorsque le #add_ons le menu de sélection déclenche "changer" nous obtenons quelques valeurs de quelques éléments pour les calculs.

nous récupérons l'attribut label de l'option de notre sélection qui stocke la valeur à ajouter au total, le nom de la sélection pour créer une session avec ce nom et cette valeur pour vérifier plus tard laquelle a été sélectionnée.

maintenant - nous vérifions si le val == "" (ce qui indiquerait qu'aucune option n'a été sélectionnée) et nous déduisons le montant du total ainsi que nous supprimons la session avec le nom de la personne sélectionnée.

C'est après cela que le problème commence - else déclaration.

Else - nous voulons vérifier si le isSession() avec le nom de notre sélecteur renvoie 0 ou 1 - si elle renvoie 0 alors nous ajoutons au total la valeur stockée dans l'attribut label, mais si elle renvoie 1 - ce qui suggérerait que la session existe déjà - alors nous ne changeons la valeur de cette session qu'en la recréant - mais le montant ne lui est pas ajouté.

Maintenant isSession ressemble à ceci :

function isSession(selector) {
    $.ajax({
        type: "POST",
        url: '/order.html',
        data: ({ issession : 1, selector: selector }),
        dataType: "html",
        success: function(data) {
            return data;
        },
        error: function() {
            alert('Error occured');
        }
    });
}

Maintenant, le problème est que je ne sais pas si l'on peut utiliser return renverra le résultat de la fonction - car cela ne semble pas fonctionner - cependant, si je mets les "données" de la section "success :" dans le champ alert() - il semble renvoyer la bonne valeur.

Quelqu'un sait-il comment retourner la valeur de la fonction et la comparer ensuite dans l'instruction suivante ?

---

Merci les gars - J'ai essayé de la manière suivante :

function isSession(selector) {
    $.ajax({
        type: "POST",
        url: '/order.html',
        data: ({ issession : 1, selector: selector }),
        dataType: "html",
        success: function(data) {
            updateResult(data);
        },
        error: function() {
            alert('Error occured');
        }
    });
}

alors le updateResult() fonction :

function updateResult(data) {
    result = data;
}

result - est la variable globale - que j'essaie ensuite de lire :

$("#add_ons select").change(function() {
        // get current price of the addons
        var order_price_addon = $(".order_price_addon").text();
        // get price of the clicked radio button from the rel attribute
        var add = $(this).children('option').attr('label');
        var name = $(this).attr('name');
        var val = $(this).val();

        if(val == "") {
            var price = parseInt(order_price_addon) - parseInt(add);
            removeSession(name);
        } else {
            isSession(name);
            if(result == 0) {
                var price = parseInt(order_price_addon) + parseInt(add);
            }   
            setSession(name, val);              
        }

        $(".order_price_addon").html(price);    
        setSession('order_price_addon', price);         
        updateTotal();
    });

mais pour une raison quelconque - cela ne fonctionne pas - une idée ?

Answer 1

Le problème est que vous ne pouvez pas renvoyer une valeur à partir d'un appel asynchrone, comme une demande AJAX, et espérer que cela fonctionne.

La raison en est que le code qui attend la réponse a déjà été exécuté au moment où la réponse est reçue.

La solution à ce problème consiste à exécuter le code nécessaire dentro de le site success: le rappel. De cette façon, il accède au data uniquement lorsqu'il est disponible.

function isSession(selector) {
    $.ajax({
        type: "POST",
        url: '/order.html',
        data: ({ issession : 1, selector: selector }),
        dataType: "html",
        success: function(data) {
            // Run the code here that needs
            //    to access the data returned
            return data;
        },
        error: function() {
            alert('Error occured');
        }
    });
}

Une autre possibilité (qui revient au même) est d'appeler une fonction à l'intérieur de votre fichier success: callback qui transmet les données lorsqu'elles sont disponibles.

function isSession(selector) {
    $.ajax({
        type: "POST",
        url: '/order.html',
        data: ({ issession : 1, selector: selector }),
        dataType: "html",
        success: function(data) {
                // Call this function on success
            someFunction( data );
            return data;
        },
        error: function() {
            alert('Error occured');
        }
    });
}

function someFunction( data ) {
    // Do something with your data
}

Answer 2

Il existe de nombreuses façons d'obtenir une réponse AJAX de jQuery. Je vais partager avec vous deux approches communes :

D'abord :

utiliser async=false et dans la fonction, retourner ajax-object et plus tard obtenir réponse ajax-object.responseText

/**
 * jQuery ajax method with async = false, to return response
 * @param  {mix}  selector - your selector
 * @return {mix}           - your ajax response/error
 */
function isSession(selector) {
    return $.ajax({
        type: "POST",
        url: '/order.html',
        data: {
            issession: 1,
            selector: selector
        },
        dataType: "html",
        async: !1,
        error: function() {
            alert("Error occured")
        }
    });
}
// global param
var selector = !0;
// get return ajax object
var ajaxObj = isSession(selector);
// store ajax response in var
var ajaxResponse = ajaxObj.responseText;
// check ajax response
console.log(ajaxResponse);
// your ajax callback function for success
ajaxObj.success(function(response) {
    alert(response);
});

Deuxièmement :

utiliser $.extend et créer une nouvelle fonction comme ajax

/**
 * xResponse function
 *
 * xResponse method is made to return jQuery ajax response
 * 
 * @param  {string} url   [your url or file]
 * @param  {object} your ajax param
 * @return {mix}       [ajax response]
 */
$.extend({
    xResponse: function(url, data) {
        // local var
        var theResponse = null;
        // jQuery ajax
        $.ajax({
            url: url,
            type: 'POST',
            data: data,
            dataType: "html",
            async: false,
            success: function(respText) {
                theResponse = respText;
            }
        });
        // Return the response text
        return theResponse;
    }
});

// set ajax response in var
var xData = $.xResponse('temp.html', {issession: 1,selector: true});

// see response in console
console.log(xData);

vous pouvez le faire aussi grand que vous voulez...

Answer 3

EDIT : C'est assez vieux, et moche, ne faites pas ça. Vous devriez utiliser des callbacks : https://stackoverflow.com/a/5316755/591257

EDIT 2 : Voir le récupérer l'API

J'ai eu le même problème, je l'ai résolu de cette façon, en utilisant une variable globale. Je ne suis pas sûr que ce soit la meilleure solution, mais elle fonctionne. En cas d'erreur, vous obtenez une chaîne vide (myVar = ''), vous pouvez donc la gérer comme vous le souhaitez.

var myVar = '';
function isSession(selector) {
  $.ajax({
    'type': 'POST',
    'url': '/order.html',
    'data': {
      'issession': 1,
      'selector': selector
    },
    'dataType': 'html',
    'success': function(data) {
      myVar = data;
    },
    'error': function() {
      alert('Error occured');
    }
  });
  return myVar;
}

Answer 4

Ajouter async: false à votre liste d'attributs. Cela oblige le thread javascript à attendre que la valeur de retour soit récupérée avant de poursuivre. Évidemment, vous ne voudriez pas faire cela dans toutes les circonstances, mais si une valeur est nécessaire avant de continuer, cela le fera.

Answer 5

// Common ajax caller
function AjaxCall(url,successfunction){
  var targetUrl=url;
  $.ajax({
    'url': targetUrl,
    'type': 'GET',
    'dataType': 'json',
    'success': successfunction,
    'error': function() {
      alert("error");
    }
  });
}

// Calling Ajax
$(document).ready(function() {
  AjaxCall("productData.txt",ajaxSuccessFunction);
});

// Function details of success function
function ajaxSuccessFunction(d){
  alert(d.Pioneer.Product[0].category);
}

cela peut vous aider, créez une fonction d'appel ajax commune et attachez une fonction qui sera invoquée lorsque l'appel ajax sera réussi, voir l'exemple suivant