$ .ajax（）を複数回実行しています

Question

jQuery $ .ajax（）関数は、成功するとpdfページのbase64値を返します。私は複数のbase64値を返さなければならないので、これを行う方法を考える唯一の方法は、$ .ajax（）関数をループすることです。各成功が返されると、image64要素にbase64値を書き込みます。これは正常に動作します。問題は非同期であるため、必ずしも順番にページを返すわけではありません。 私はそれが最善の方法ではないことを理解していますが、私はいつもページ数である別の値を持つつもりなら、これをチェーンすることはできますか？

for (i = 1; i <= pdfPageCount; i++) { 
      $.ajax({ 
       type: 'POST', 
       contentType: 'application/json', 
       url: 'Page.aspx/Method', 
       dataType: 'json', 
       error: function (err) { 
        alert('Error: ' + err); 
       }, 

       success: function (resultStr) { 
        //alert('Page: ' + i); 

        var sigImage = document.createElement("img"); 
        sigImage.setAttribute('src', 'data:image/png;base64,' + 
    resultStr.d); 

        document.getElementById("imgId").appendChild(sigImage); 
       }, 
      }); 
    } // end the for loop 

HTMLだけdiv要素を持っています

<form id="form1" runat="server"> 
    <div id="imgId"> 
    </div> 
    </form> 

Answer 1

キーはwhenを使用します。あなたの呼び出しを同期的に連鎖させることはできますが、私はそれを提案しません。より良いアプローチは、各ページを非同期的に呼び出し、すべての結果を同時に待つことです。

var pages = []; 
var deferredObjs = []; 
for (i = 0; i <= pdfPageCount; i++) { 
      deferredObjs[i] = $.ajax({ 
       type: 'POST', 
       contentType: 'application/json', 
       url: 'Page.aspx/Method', 
       dataType: 'json', 
       error: function (err) { 
       alert('Error: ' + err); 
      }, 

      success: function (resultStr) { 
      pages[i] = resultStr; 
      }, 
     }); 
} // end the for loop 


$.when.apply($, deferredObjs).then(aFunctionToProcessPageResults()); 

また、あなたのPOSTが返すページ番号を供給してはいけませんか？インデックス変数を0に変更したことに注意してください。これを考慮する必要があるかもしれません。

Answer 2

あなたは反復を使用するのではなく、成功コールバックからのAJAX呼び出しを再帰する必要があります。

(function recurse(i){ 
     if(i > pdfPageCount)return; 
     $.ajax({ 
      type: 'POST', 
      contentType: 'application/json', 
      url: 'Page.aspx/Method', 
      dataType: 'json', 
      error: function (err) { 
       alert('Error: ' + err); 
      }, 
      success: function (resultStr) { 
       recurse(i+1); 

       var sigImage = document.createElement("img"); 
       sigImage.setAttribute('src', 'data:image/png;base64,' + 
resultStr.d); 

       document.getElementById("imgId").appendChild(sigImage); 
      } 
     }); 
    })(1) 

Answer 3

$.ajax({ 
       url:"url", 
       data:form, 
       dataType:'json', 
       async:true, 
       type:'post', 
       processData: false, 
       contentType: false, 
       success:function(data){} 
       }); 

非同期：定義により真