jQueryを使用して関数に$ .getデータを返す

StackOverflow https://stackoverflow.com/questions/1639555

  •  08-07-2019
  •  | 
  •  

質問

jQueryコードを含む関数を呼び出そうとしています。この関数がjQueryステートメントの結果を返すようにします。動作していません。理由を解明しようとしています。

function showGetResult (name) {
    var scriptURL = "somefile.php?name=" + name;
    return $.get(scriptURL, {}, function(data) { return data; });
}

alert (showGetResult("John"));

アラートには＆quot; [object XMLHttpRequest] が表示されます。＆quot;ただし、関数の外でjQueryステートメントを単独で実行すると、正常に動作します-＆gt; $。get（scriptURL、{}、function（data）{alert（data）;}）

$。get データを返す関数内にコードを配置することで、このコードを再利用できるようにしたいと思います。ここでどんな根本的な間違いを犯していますか？

役に立ちましたか？

解決

いくつかの異なる間違いがあります。まず、$。getはコールバック関数の戻り値を返しません。 XHRオブジェクトを返します。次に、get関数は同期的ではなく、非同期であるため、getGetResultはgetが完了する前に戻る可能性があります。第三に、コールバック内部から外部スコープに何かを返すことはできません。ただし、外部スコープで変数をバインドし、コールバックで設定できます。

必要な機能を取得するには、$。ajaxを使用し、asyncオプションをfalseに設定する必要があります。次に、外部スコープで変数を定義し、ajaxコールバックで変数を割り当てて、関数からこの変数を返します。

function showGetResult( name )
{
     var result = null;
     var scriptUrl = "somefile.php?name=" + name;
     $.ajax({
        url: scriptUrl,
        type: 'get',
        dataType: 'html',
        async: false,
        success: function(data) {
            result = data;
        } 
     });
     return result;
}

ただし、非同期呼び出しから同期呼び出しに変更するのではなく、コールバック関数自体で必要な処理を行う方法を見つけて、サービスを提供した方がよいでしょう。

他のヒント

あなたが犯している根本的な間違いは、AJAX呼び出しが非同期に行われることです。そのため、戻るまでに結果はまだ準備できていません。これを機能させるには、次のようにコードを変更できます。

$(function() {
    showGetResult('John');
});

function showGetResult (name) {
    $.get('somefile.php', { 
        // Pass the name parameter in the data hash so that it gets properly
        // url encoded instead of concatenating it to the url.
        name: name 
    }, function(data) { 
        alert(data); 
    });
}

同期リクエストが必要なようです： 入手方法非同期ではなく同期Ajaxリクエストを実行するjQuery？

または、コールバックを関数に渡すこともできます。

function showGetResult (name, callback) {
  var scriptURL = "somefile.php?name=" + name;
  return $.get(scriptURL, {}, callback);
}

showGetResult("John", function(data){ alert(data); });

根本的な間違いは「非同期」ですAJAXの一部。サーバーが応答を返送するのにかかる時間はわからないため、AJAXメソッドは決して「ブロック」しません。 -つまり、サーバーにコールアウトせず、結果を待つためにそこに座っているだけです。代わりに、他の何かに進みますが、結果が戻ったときに起動する「コールバック」と呼ばれるメソッドを設定します。このメソッドは、データに対して行う必要のあることをすべて実行します（たとえば、ページにデータを挿入します）。

これは間違った方法です。 function（data）はコールバック関数なので、 return $ .get が実行されるたびに、コールバック関数が呼び出されなかった可能性があります。

function（data）メソッドから投稿データ取得関数を呼び出す方が良い。

効率的な方法は、jQueryのDeferredメソッドを使用することです。サーバーへの同期/非同期要求と、deferred.resolve（）の待機の両方を行い、遅延Promiseオブジェクトを返します。少々退屈に見えますが、大規模なデータを扱うには少し勉強するだけで十分です。 （この場合、tvanfossonの機能はうまく機能しますが、Googleの分析データに取り組んでいたとき、大量の情報に夢中になっていたため、このソリューションを見つける必要があります）

     function showResults(name) { 
        var deferred = $.Deferred, requests = [];

        requests.push($.ajax({url:"/path/to/uri/?name=" + name, type: "GET", async: false}).done(function(d) { 
         //alert or process the results as you wish 
        }));
        $.when.apply(undefined, requests).then(function() { deferred.resolve(); }); 
        return deferred.promise();

    }

返されたpromiseオブジェクトは、 $。when（showResults（ 'benjamin'））。done（function（）{}）; とともに使用して、ポスト変更（チャート/グラフ設定など）にも使用できます。 ）。完全に再利用可能です。 この関数は、次のような$ .deferredリクエストのループに入れることもできます。

        function updateResults() { 
             var deferred = $.Deferred, requests = [];
             requests.push($.ajax(url:"/path/to/names/?nameArr=" + jsonArrOfNames, type: "GET", async: false}).done(function(res) {  requests.push(showResults(res[0]));}) );
             $.when.apply($, requests).then(function() { deferred.resolve(); }); 
             return deferred.promise();
            }
ライセンス： CC-BY-SA と 帰属
所属していません StackOverflow
scroll top