来自asp.net中循环的ajax调用

Question

GetDataStudentPDF() 调用 webmethods 并获取项目列表，每个项目都是一个 html 脚本。我只想将该脚本设置为 div，然后调用另一个 SaveImage() 函数，该函数将 div 转换为图像并保存它。每个项目都应该发生这种情况

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/