jqueryからの変数の割り当てajax呼び出しは未定義を返します

Question

私はjqueryが新しく、ajax呼び出しの後に変数に値を代入しようとしていますが、未定義を返します。私のコードは以下の通りです：

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

助けてください。 ありがとう、

Answer 1

これは非同期操作の使用に慣れていない人にとっては非常に一般的な問題です。通常のシーケンシャルスタイルでプログラミングすることはできないので、コードの構造を再考する必要があります。

非同期ajax呼び出しの成功ハンドラから値を返すことはできません。 ajax cllはすでに完成し、すでに返されています。成功ハンドラから値を返すだけで、あなたのコードに戻るのではなく、Ajaxコードの中に入ります。

代わりに、成功ハンドラまたは成功ハンドラからコールする関数でajax呼び出しの結果を使用する必要があります。

具体的には、getAverageRating()関数はコールバック関数を使用する必要があり、評価が取得されるとコールバック関数が呼び出されます。値が返されないのは、直ちに戻り、その後、ajax呼び出しが完了し、ajax関数の成功ハンドラが実際のデータとともに呼び出されるためです。

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

}