1

私は PHP でアプリを開発していますが、いくつかの時点で、アプリは複数の AJAX POST (それぞれが少量の HTML を返します) を作成する必要があります。これらの各 POST は、返された HTML を div に挿入する必要があります。問題はありませんが、すべての AJAX POST を一度に開始すると (10 を開始するとします)、POST ごとに個別の div を指定すると問題が発生します。それらはすべて非同期であり、すべてがほぼ同時に返されるため、すべての HTML は、それぞれ個別の div ではなく、1 つの div になります。明確にするためにいくつかのコードを投稿します。これは、私の「apiCall」関数の簡素化されたバージョンです。

xhr = $.ajax({
    type: "POST",
    url: "../api.php",
    dataType: "json",
    data: data,
    success: function(data) {
      obj.html(data.D['html']);
    }
});

問題が発生するのは成功関数のあたりです。data.D['html'] には POST からの HTML が含まれていますが、次の AJAX POST によって上書きされていると思います。私が書いたプラグイン、obj は渡された div です) 私はそれを次のように呼びます:

$("#container).apiCall({options...});

これらの AJAX POST が返されたときに、その特定の POST から返されたデータを正しい div に入れることができるようにするソリューションを誰かが提供できますか?

4

1 に答える 1

3

これを数回行っており、常に同じ obj を参照しています。その間、obj を上書きしています。

すべての ajax 関数がセットアップされ、応答が到着し始める (そしてコールバックが実行を開始する) までに、すべての obj 参照は obj の最後の値を指します。

クロージャーを使用して別の変数 (この場合は myObj) に保存します。

xhr = (function(){
  var myObj = obj;
  return $.ajax({
      type: "POST",
      url: "../api.php",
      dataType: "json",
      data: data,
      success: function(data) {
        myObj.html(data.D['html']);
      }
  });
})();

$.ajax() が返すものを直接 xhr に代入する代わりに、無名関数を作成してすぐに呼び出します。 ( function(){ /* code */ } )()

その関数は、obj を myObj (無名関数のローカル変数) に「バックアップ」し、$.ajax() が返すものを単純に返します。

このコードはテストしていません。エラーがあれば教えてください。

于 2012-04-07T01:54:08.430 に答える