jQuery: données de Retour après appel ajax succès

Question

j'ai quelque chose comme ça, où c'est un simple appel à un script qui me redonne une valeur, une chaîne..

function testAjax() {
    $.ajax({
      url:"getvalue.php",  
      success:function(data) {
         return data; 
      }
   });
}

mais si je l'appelle quelque chose comme ceci

var output  = testAjax(svar);  // output will be undefined...

alors, comment puis-je retourner la valeur? le code ci-dessous ne semble pas fonctionner non plus...

function testAjax() {
    $.ajax({
      url:"getvalue.php",  
      success:function(data) {

      }
   });
   return data; 
}

Answer 1

Vous ne pouvez pas retourner quelque chose à partir d'une fonction qui est asynchrone. Ce que vous pouvez revenir est une promesse. J'ai expliqué comment les promesses de travail en jQuery dans mes réponses à ces questions:

• Fonction JavaScript qui renvoie appel AJAX de données
• jQuery jqXHR - annuler enchaîné les appels, déclencher d'erreur de la chaîne d'

Si vous pouviez expliquer pourquoi voulez-vous retourner les données et ce que vous voulez faire avec elle plus tard, alors je pourrais être en mesure de vous donner plus de réponse précise comment le faire.

En général, au lieu de:

function testAjax() {
  $.ajax({
    url: "getvalue.php",  
    success: function(data) {
      return data; 
    }
  });
}

vous pouvez écrire votre testAjax fonction comme ceci:

function testAjax() {
  return $.ajax({
      url: "getvalue.php"
  });
}

Ensuite, vous pouvez obtenir votre promesse comme ceci:

var promise = testAjax();

Vous pouvez stocker votre promesse, vous pouvez la passer autour de vous, vous pouvez l'utiliser comme un argument dans les appels de fonction et vous pouvez le retourner à partir de fonctions, mais enfin, lorsque vous voulez utiliser vos données retourné par l'appel AJAX, vous devez le faire comme ceci:

promise.success(function (data) {
  alert(data);
});

Si vos données sont disponibles à ce point, alors cette fonction sera appelé immédiatement. Si ce n'est pas le cas, alors elle sera invoquée dès que les données sont disponibles.

Le point de l'ensemble de tout cela est que vos données ne sont pas disponibles immédiatement après l'appel de $.ajax, car il est asynchrone. Promesses est une belle abstraction pour les fonctions de dire: je ne peux pas vous renvoyer les données, parce que je ne l'ai pas encore et je ne veux pas bloquer et vous faire patienter voici donc une promesse à sa place, et vous serez capable de l'utiliser plus tard, ou simplement donner à quelqu'un d'autre et être fait avec elle.

Voir cette DÉMO.

Mise à JOUR

Actuellement jQuery Promesses ne sont pas compatibles avec les Promesses/A+ spécification qui signifie qu'ils ne peuvent pas coopérer très bien avec d'autres Promesses/A+ conforme implémentations.

Pour plus d'infos, voir:

• http://bugs.jquery.com/ticket/14510
• https://gist.github.com/domenic/3889970
• http://promises-aplus.github.io/promises-spec/
• http://www.html5rocks.com/en/tutorials/es6/promises/

Answer 2

La seule manière de renvoyer les données à partir de la fonction serait de faire un appel synchrone au lieu d'un appel asynchrone, mais qui aurait pour effet de geler le navigateur tandis qu'il attend la réponse.

Vous pouvez passer d'une fonction de rappel qui gère le résultat:

function testAjax(handleData) {
  $.ajax({
    url:"getvalue.php",  
    success:function(data) {
      handleData(data); 
    }
  });
}

L'appeler comme ceci:

testAjax(function(output){
  // here you use the output
});
// Note: the call won't wait for the result,
// so it will continue with the code here while waiting.

Answer 3

vous pouvez ajouter async option à false et retourner à l'extérieur de l'appel ajax.

function testAjax() {
    var result="";
    $.ajax({
      url:"getvalue.php",
      async: false,  
      success:function(data) {
         result = data; 
      }
   });
   return result;
}

Answer 4

Idk si vous les gars résolu, mais je vous recommande une autre façon de faire, et ça fonctionne :)

    ServiceUtil = ig.Class.extend({
        base_url : 'someurl',

        sendRequest: function(request)
        {
            var url = this.base_url + request;
            var requestVar = new XMLHttpRequest();
            dataGet = false;

            $.ajax({
                url: url,
                async: false,
                type: "get",
                success: function(data){
                    ServiceUtil.objDataReturned = data;
                }
            });
            return ServiceUtil.objDataReturned;                
        }
    })

Donc, l'idée principale ici est que, en ajoutant async: false, alors vous faites tout ce qui attend jusqu'à ce que les données sont récupérées. Ensuite, vous pouvez l'affecter à une variable statique de la classe, et la magie, tout fonctionne :)

Answer 5

Voir jquery docs exemple: http://api.jquery.com/jQuery.ajax/ (environ 2/3 de la page)

Vous cherchez peut-être pour le code suivant:

    $.ajax({
     url: 'ajax/test.html',
     success: function(data) {
     $('.result').html(data);
     alert('Load was performed.');
   }
});

Même page...en bas.