jquery ajaxの同期・非同期実行で戻り値が取得できない問題の解決策_jquery

まず、jquery の単純な js ajax 戻り値を見てみましょう。

code

Copy code コードは次のとおりです。 :

function getReturnAjax{
$.ajax({
type:"POST", data:"username=" vusername.value,
success:function(msg){
if(msg=="ok"){
showtipex(vusername.id," ユーザー名は使用できます",false)
true を返します; それ以外の場合は showtipex(vusername.id," < b>ユーザーは登録されました",false);
vusername.className="bigwrong";
return false ;
} }

しかし、getReturnAjax() を呼び出すと、返されるのは false だけであることがわかります。つまり、return true と return false はデバッグにまったく影響しません。 Firefox の firebug も、コードが return 部分まではまったく実行されないことを証明しています。

関数内で変数を定義し、それを ajax で代入し、最後にその変数を返すことを想像してみましょう。コードを次のように変更します:

Code

Copy codeコードは次のとおりです。

function getAjaxReturn(){
var bol=false;
$.ajax({
type:"POST", data:"username= " vusername.value,
success:function(msg){
if(msg=="ok"){
showtipex(vusername.id,"このユーザー名は",false)
// return true;
bol=true; else showtipex(vusername.id,"ユーザーは登録されました",false);
vusername.className ="bigwrong";
//return false; }
return bol;

結果はまだ機能しません。最終的な解決策は次の 2 です。

1. async:false を追加します。つまり、同期に変更されます。 (同僚の説明によると、次の js は、ajax が戻り値を取得するまで実行されません。これにより、過去の多くの ajax 呼び出しでの代入が機能しなかったことが明らかになります)。このように、ajaxがbolに値を代入した後、以下のjs部分が実行されます。先ほど非同期だった場合は、値が割り当てられる前に返されているはずです。

コード

コードをコピー コードは次のとおりです。

function getAjaxReturn () {
var bol=false;
$.ajax({
type:"POST",
async:false, data:"username=" vusername.value,
成功: function(msg ){
if(msg=="ok"){
showtipex(vusername.id,"このユーザー名では ",false) を使用できます
// return true;
bol=true; else showtipex(vusername.id,"< img src='images/cancel.gif'/>ユーザーは登録されました",false);
vusername.className="bigwrong";
//return false; }
}

2. この問題を解決します。
コードをコピーします

コードは次のとおりです: function getAjaxReturn(success_function,fail_function){ var bol=false; ajax({ type:"POST", data:"username=" vusername.value,

success:function(msg){

if(msg=="ok"){
showtipex( vusername.id,"このユーザー名は< /b>を使用できます", false)
success_function(msg);
}
else showtipex(vusername.id,"ユーザーは登録されています",false);
vusername.className="bigwrong";
fail_function(msg);
//return false ; }
});
function success_function(info) // したいことをする
alert(info) // したいことをする
alert(info) ;
}