1

Webページに2つのセクションがあり、個々のAJAX呼び出しと、それに続くコンテンツをDOMに挿入する前のデータのテンプレート化が必要です。現在、私はこれを行うための最良の方法を検討しており、jQuery Deferredsに関する多くの記事を読んでいますが、その多くが、最良の方法が何であるか完全にはわからないほどです。以下は私が使用すると思うコードですが、いくつかの入力を本当にいただければ幸いです。誰かがそれについていくつかのアドバイスを追加したいのであれば、私はキャッシングについても非常にぼんやりしています。

JS

function ajaxCall1() {
    var dfd = $.Deferred();
    return $.ajax({
        type: 'POST',
        dataType: 'json',
        url: '/url1',
        data: { },
        success: function(data) {
            // Run templating code
        }
    });
    return dfd.promise();
}

function ajaxCall2() {
    var dfd = $.Deferred();
    return $.ajax({
        type: 'POST',
        dataType: 'json',
        url: '/url2',
        data: { },
        success: function(response) {
            // Run templating code
        }
    });
    return dfd.promise();
}

$.when( ajaxCall1(), ajaxCall2() )
   .then(function(){
      // Display DOM elements
   })
   .fail(function(){
      // Display error message
   });
4

1 に答える 1

1

Deferred を使用するには、次のことを行う必要があります。

1 - generate a new $.Deferred()
2 - return its .promise() from the function
3 - .resolve() the deferred in the callback of the Ajax request

の行の何か

function ajaxCall1() {
   var dfd = new $.Deferred();
   $.ajax({
      ...
      success: function(data) {
         dfd.resolve(data);
      }
   });
   return dfd.promise();
}

function ajaxCall2() {
   var dfd = new $.Deferred();
   $.ajax({
      ...
      success: function(data) {
         dfd.resolve(data);
      }
   });
   return dfd.promise();
}

$.when(ajaxCall1(), ajaxCall2()).then(function(data1, data2) {
   // data1 holds the result of the first ajax call, data2 that of the second call
});

編集: $.ajax() はすでに遅延を返すため、次のように簡単に実行できます

function ajaxCall1() {
   return $.ajax({
      ...
   });
}

function ajaxCall2() {
   return $.ajax({
      ...
   });
}

$.when(ajaxCall1(), ajaxCall2()).done(function(data1, data2) {
   // data1 holds the result of the first ajax call, data2 that of the second call
});
于 2012-11-21T09:54:20.633 に答える