jQuery ajax éxito ámbito de función anónima

¿Cómo actualizo la variable returnHtml desde la función de éxito anónimo?

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

Ese es el enfoque equivocado. La primera A en AJAX es asincrónica. Esa función regresa antes de que la llamada AJAX regrese (o al menos pueda). Entonces este no es un problema de scope. Es una cuestión de ordenar. Solo hay dos opciones:

  1. Haga que la llamada AJAX sea sincrónica ( no recomendada ) con la opción async: false ; o
  2. Cambia tu forma de pensar En lugar de devolver HTML desde la función, necesita pasar una callback para que se llame cuando la llamada AJAX tenga éxito.

Como un ejemplo 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); 

Respuesta corta, no se puede, la primera A en AJAX significa Asincrónico, lo que significa que la solicitud continúa cuando llega a la statement de devolución.

Puedes hacerlo con una solicitud sincrónica (no asincrónica), pero generalmente es una cosa mala

Algo como el siguiente oughta devolver los datos.

 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; } 

PERO

A menos que realmente necesite poder utilizar el valor de retorno de la prueba de inmediato, será mucho mejor pasar una callback en prueba. Algo como

 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 } 

Edita Sheesh, ustedes son más rápidos para decir lo que dije 🙂

Su función anónima no tiene acceso a la variable returnHtml en su scope, por lo que el código allí realmente está funcionando como era de esperar. Donde probablemente esté fallando está en su statement de devolución.

Recuerde que la A en AJAX significa asynchronous , lo que significa que no ocurre al mismo tiempo. Por esa razón, la línea returnHtml = html está sucediendo realmente después de llamar a return returnHtml; , entonces returnHtml sigue siendo una cadena vacía.

Es difícil decir qué debes hacer para que funcione como quieras sin ver el rest del código, pero lo que podrías hacer es agregar otra callback a la función:

 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); });