Przypisywanie zmiennej z wywołania ajax jquery zwraca undefined

Question

Jestem nowy jquery i próbuję przypisać wartość do zmiennej po wywołaniu ajax, ale zwraca undefined. Mój kod jest poniżej:

function prepareDocument() { 
var a = getAverageRating(1); 
alert(a); 
} 
function getAverageRating(pageId) { 
$.ajax({ 
    url: "../services/rating.ashx?action=getAverageRating&pageId=" + pageId, 
    dataType: "text", 
    type: "GET", 
    data: {}, 
    error: function (err) { 
     displayDialogBox("Error", err.toString()); 
    }, 
    success: function (data) { 
     return data; 
    } 
}); 
} 

Każda pomoc będzie doceniona. Dziękujemy,

Answer 1

Jest to bardzo częsty problem dla osób nieużywających asynchronicznych operacji. Wymaga to ponownego przemyślenia sposobu konstruowania kodu, ponieważ nie można po prostu programować w normalnym stylu sekwencyjnym.

Nie można zwrócić wartości z procedury obsługi asynchronicznego wywołania ajax. Klocek ajax już dawno się zakończył i już został zwrócony. Zwrócenie wartości z modułu obsługi udanej po prostu idzie do wnętrza kodu ajax, a nie do kodu.

Zamiast tego należy użyć wyników wywołania ajax w procedurze obsługi sukcesu lub w funkcji, którą wywołuje się z procedury obsługi sukcesu.

W konkretnym przypadku, twoja funkcja getAverageRating() prawdopodobnie potrzebuje funkcji wywołania zwrotnego, a po uzyskaniu oceny funkcja wywołania zwrotnego zostanie wywołana. Nie może zwrócić wartości, ponieważ zwraca się natychmiast, a następnie jakiś czas w przyszłości, wywołanie ajax kończy się, a moduł obsługi sukcesu w funkcji ajax jest wywoływany z rzeczywistymi danymi.

function prepareDocument() { 
    getAverageRating(1, function(data) { 
     alert(data); 
    }); 
} 

function getAverageRating(pageId, fn) { 

    $.ajax({ 
     url: "../services/rating.ashx?action=getAverageRating&pageId=" + pageId, 
     dataType: "text", 
     type: "GET", 
     data: {}, 
     error: function (err) { 
      displayDialogBox("Error", err.toString()); 
     }, 
     success: function (data) { 
      fn(data); 
     } 
    }); 

}