Comment puis-je obtenir cette fonction pour retourner la valeur récupérée en utilisant jQuery.ajax?

Question

J'ai besoin de revenir contenu chargé dynamique. Je pensais que c'était la façon de le faire, mais la fonction retourne vide. Que dois-je faire pour mettre htmlCode avec le code html récupéré de jQuery.ajax?

// Get directory listing 
    function getHTML(instance, current_path, dir) { 
    var htmlCode = ''; 

     jQuery.ajax({ 
      type: "POST", 
      url: "../wp-content/plugins/wp-filebrowser/jquery.php", 
      dataType: 'html', 
      data: {instance: instance, current_path: current_path, dir: dir}, 
      success: function(html){ 
       htmlCode = html; 
      }, 
      error: function(e) { 
      htmlCode = '[Error] ' + e; 
      } 
     }); 

     return htmlCode; 
    } 

Answer 1

Cela se produit parce que la demande de paiement ajax prend un certain temps pour obtenir le code html et vos feux de déclaration de retour avant le html est prêt. L'exécution du code Javascript n'attend pas que votre code HTML retourne. Vous pouvez réellement voir cela en supprimant le retour et en mettant deux alertes. Mettez un alert dans l'événement de réussite et un où vous avez placé votre déclaration de retour. Le deuxième alert alerterait avant. Donc, même si votre code HTML est tiré par les cheveux, il est jamais réellement retourné avec succès à la fonction appelante parce que la déclaration de retour déjà tiré par le temps html est prêt.

Vous pouvez utiliser un callback si vous voulez strictement la fonction getHtml() pour revenir (en réalité call back) le code html en tant que sortie, ou bien vous pouvez utiliser la manière suggérée par Nick.

Voici comment utiliser un rappel: -

function getHTML(instance, current_path, dir,callback) 
{ 
    var htmlCode = ''; 

    jQuery.ajax({ 
     type: "POST", 
     url: "../wp-content/plugins/wp-filebrowser/jquery.php", 
     dataType: 'html', 
     data: {instance: instance, current_path: current_path, dir: dir}, 
     success: function(html){ 

     callback(html); //instead of a return 

     }, 
     error: function(e) { 
     htmlCode = '[Error] ' + e; 
     } 
    }); 

}

Appelez la fonction comme celui-ci -

getHTML(instance, current_path, dir, 
    function(html) 
    { 
     //Write code to use the html here - this will run when the getHTML() function does callback with the output html 
    } 
); 

Notez le paramètre callback dans la définition de la fonction getHTML (par exemple, current_path, dir, callback) et la partie function(html){} correspondante dans la fonction appelée.

De cette façon, vous définissez en fait: -

• la fonction appelée à call back la fonction de l'appelant lorsque la sortie est prêt
• et la fonction de l'appelant de faire quelque chose quand il reçoit le call back.

Answer 2

Il est une opération asynchrone, vous ne pouvez pas revenir vraiment comme ça ... pas sans l'option (async: true) synchrone demande, mais je conseille contre cette ... car il bloque le navigateur pour la durée de la demande. Vous ne pouvez pas revenir parce que le rappel success, lorsque asynchrone, ne se produit pas avant plus tard après la demande court, de sorte que votre htmlCode = html; code a tout simplement pas encore exécuté.

Il est une meilleure approche d'appeler ce qui est nécessaire à partir de votre rappel success une fois que vous avez les données prêtes, par exemple:

success: function(html){ 
    doSomethingWithHtml(html); 
}, 

ou plus succinctement pour ce cas en une ligne spécifique:

success: doSomethingWithHtml,