jQuery ajax success fonction anonyme portée

Question

jQuery ajax success fonction anonyme portée

comment mettre à jour la variable returnHtml à partir de la fonction anonymous success?

function getPrice(productId, storeId) {
    var returnHtml = '';

    jQuery.ajax({
        url: "/includes/unit.jsp?" + params,
        cache: false,
        dataType: "html",
        success: function(html){
            returnHtml = html;
        }
    });

    return returnHtml;
}

38

ajax jquery

demandé sur Luffy 2009-09-22 05:21:50

3 réponses

score 59 · Answer 1

c'est la mauvaise approche. Le premier A en AJAX est asynchrone. Cette fonction retourne avant le retour de L'appel AJAX (ou du moins elle le peut). Donc ce n'est pas une question de portée. C'est un problème de commande. Il n'y a que deux options:

synchroniser L'appel AJAX ( non recommandé ) avec l'option async: false ou
changez votre façon de penser. Au lieu de renvoyer du HTML à partir de la fonction, vous devez passer un callback pour être appelé lorsque L'appel AJAX réussit.

comme exemple de (2):

function findPrice(productId, storeId, callback) {
    jQuery.ajax({
        url: "/includes/unit.jsp?" + params,
        cache: false,
        dataType: "html",
        success: function(html) {
            callback(productId, storeId, html);
        }
    });
}

function receivePrice(productId, storeId, html) {
    alert("Product " + productId + " for storeId " + storeId + " received HTML " + html);
}

findPrice(23, 334, receive_price);

score 14 · Answer 2

courte réponse, vous ne pouvez pas, le premier A en AJAX signifie asynchrone, ce qui signifie que la requête est toujours en cours lorsque vous arrivez à la déclaration de retour.

Vous peut faire avec un synchrones (non-async) demande, mais il est généralement un Mauvaise Chose

quelque chose comme les suivants oughta retourner les données.

function getPrice(productId, storeId) {
  var returnHtml = '';

  jQuery.ajax({
    url: "/includes/unit.jsp?" + params,
    async: false,
    cache: false,
    dataType: "html",
    success: function(html){
      returnHtml = html;
    }
  });

  return returnHtml;
}

mais

sauf si vous avez vraiment besoin d'être en mesure d'utiliser la valeur de retour de test immédiatement, vous serez beaucoup il est préférable de passer un appel dans test. Quelque chose comme

function getPrice(productId, storeId, callback) {
  jQuery.ajax({
    url: "/includes/unit.jsp?" + params,
    async: true,
    cache: false,
    dataType: "html",
    success: function(html){
      callback(html);
    }
  });
}

//the you call it like
getPrice(x,y, function(html) {
    // do something with the html
}

Modifier Sheesh, les gars, vous êtes plus rapide de dire ce que j'ai dit :-)

score 12 · Answer 3

Votre fonction anonyme, il y a ne ont accès à la returnHtml variable dans son champ d'application, et ainsi le code, il existe en fait de travail comme vous le souhaitez. Ce que vous allez probablement mal, c'est dans votre déclaration de retour.

rappelez-vous que le a dans AJAX signifie asynchronous , ce qui signifie que cela ne se produit pas en même temps. Pour cette raison, la ligne returnHtml = html est en fait passe après que vous appelez return returnHtml; , donc returnHtml est toujours une chaîne vide.

il est difficile de dire ce que vous devez faire pour que cela fonctionne comme vous le voulez sans voir le reste de votre code, mais ce que vous pouvez faire est d'ajouter un autre rappel à la fonction:

function getPrice(productId, storeId, callback) {
    jQuery.ajax({
        url: "/includes/unit.jsp?" + params,
        cache: false,
        dataType: "html",
        success: callback
    });
}

getPrice(5, 1, function(html) {
    alert(html);
});

Las etiquetas más populares

jQuery ajax success fonction anonyme portée

3 réponses