多次运行 $.ajax()答案

【问题标题】：Running $.ajax() Multiple Times多次运行 $.ajax()
【发布时间】：2017-04-26 23:28:27
【问题描述】：

我有一个 jQuery $.ajax() 函数，它成功返回一个 base64 值，即 pdf 页面。我必须返回多个 base64 值，所以我能想到的唯一方法是遍历 $.ajax() 函数。当返回每个成功时，我将 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>

【问题讨论】：

根据定义，Ajax 是异步的。你可能有两种解决方案：回调地狱或承诺......

标签： jquery html

【解决方案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 开头。您可能需要考虑这一点。

【讨论】：

我最终使用了与此非常相似的东西。感谢您的帮助。

【解决方案2】：

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

异步：真

【讨论】：

这确实回答了这个问题，但出于性能原因，一次向服务器发出一个请求是不可取的。

【解决方案3】：

您需要通过成功回调中的 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)

【讨论】：