從asp.net中的循環ajax調用

Question

GetDataStudentPDF（）調用webmethods並獲取項目列表，每個項目是一個html腳本。我只想將該腳本設置爲div，然後調用另一個將div轉換爲圖像並保存的SaveImage（）函數。它應該發生在每個項目上

function SaveImage(i, lastI) { 
      $('#divStdTemplate').html2canvas({ 

       onrendered: function (canvas) { 

        var img = canvas.toDataURL("image/png").replace(/^data[:]image\/(png|jpg|jpeg)[;]base64,/i, ""); 

        $.ajax({ 
         type: "POST", 
         url: "SliderPage.aspx/StudentPopUpUploadImage", 
         data: JSON.stringify({ imageData: img }), 
         contentType: "application/json; charset=utf-8", 
         dataType: 'json', 
         async: false, 
         success: function (response) { 

         }, 
         failure: function (response) { 
          alert("html2canvas Fail"); 
         }, 
         error: function (response) { 
          alert("html2canvas Error * " + response.error + " * " + response.responseText); 
         } 
        }); 

       } 
      }); 

     } 
    function GetDataStudentPDF() 
     { 
      var cnt1 = 0; 
      $.ajax({ 
       type: "POST", 
       url: 'SliderPage.aspx/GetDataStudentPDF', 
       data: JSON.stringify({}), 
       contentType: "application/json; charset=utf-8", 
       dataType: 'json', 
       async: true, 
       success: function (response) { 

        var data = response.d; 

        $.each(data, function (index, item) { 
         $("#divStdTemplate").html(item); 
         SaveImage(); 

        }); 

       }, 
       failure: function (response) { 
       alert("Fail"); 
      }, 
      error: function (response) { 
       alert(response); 
      } 

      }); 

     } 

Answer 1

你可以遞歸地調用一個函數來做ajax調用。這將確保在成功案例之前不會調用下一次迭代。

*請注意，在這種情況下，如果任何調用失敗或出現錯誤，執行將停止。

更新1

因爲這是您的實現高度依賴，這不能被你的系統之外進行測試，但問題是，你沒有打電話SaveImage遞歸（你還是打電話每次迭代立刻）。

這裏有一個如何遞歸調用它的想法：

var dataStudentArray = []; 

function SaveImage(i) { 
    $('#divStdTemplate').html2canvas({ 
    onrendered: function (canvas) { 
     var img = canvas.toDataURL("image/png").replace(/^data[:]image\/(png|jpg|jpeg)[;]base64,/i, ""); 

     $.ajax({ 
     type: "POST", 
     url: "SliderPage.aspx/StudentPopUpUploadImage", 
     data: JSON.stringify({ imageData: img }), 
     contentType: "application/json; charset=utf-8", 
     dataType: 'json', 
     async: false, 
     success: function (response) { 
      //successfully Saved Image 
      $("#divStdTemplate").html(response.d); 

      //call next iteration if not last 
      if(i < (dataStudentArray.length - 1)) { 
      SaveId(i+1); 
      } 
     }, 
     failure: function (response) { 
      alert("html2canvas Fail"); 
     }, 
     error: function (response) { 
      alert("html2canvas Error * " + response.error + " * " + response.responseText); 
     } 
     }); 
    } 
    }); 
} 

function GetDataStudentPDF() 
{ 
    var cnt1 = 0; 
    $.ajax({ 
    type: "POST", 
    url: 'SliderPage.aspx/GetDataStudentPDF', 
    data: JSON.stringify({}), 
    contentType: "application/json; charset=utf-8", 
    dataType: 'json', 
    async: true, 
    success: function (response) { 
     //set output as array (depending on your data, you may need to iterate through the data and add each item to the dataStudentArray) 
     dataStudentArray = response.d; 

     //save the first item 
     SaveImage(0); 
    }, 
    failure: function (response) { 
     alert("Fail"); 
    }, 
    error: function (response) { 
     alert(response); 
    } 

    }); 

} 

//get all data 
GetDataStudentPDF(); 

這裏有一個簡單的jsfiddle顯示此：https://jsfiddle.net/2yxg2r0o/2/

更新0

SaveId = function(i, lastI) { 
    $.ajax({ 
    type: "POST", 
    url: 'SliderPage.aspx/SetDataStudentPDF', 
    data: JSON.stringify({ jd: i }), 
    contentType: "application/json; charset=utf-8", 
    dataType: 'json', 
    async: false, 
    success: function (response) { 
     $("#divStdTemplate").html(response.d); 
     SaveImage(); 
     if(i<lastI-1) { 
     SaveId(i+1, lastI); 
     } 
    }, 
    failure: function (response) { 
     alert("myfunction Fail"); 
    }, 
    error: function (response) { 
     alert("myfunction error ** " + response.status + " -- " + response.statusCode + " -- " + response.statusText); 
    } 
    }); 
} 

SaveId(0, 2); 

這裏有一個的jsfiddle展示代碼流程簡單：https://jsfiddle.net/2yxg2r0o/