Question

我正在执行3个嵌套的同步jQuery Ajax调用。 在最内部的Ajax调用的成功事件处理程序中，我在HTML页面上更新了一个div。在所有调用完成之前，这在HTML页面上不会生效。

我的想法是在页面上向用户提供有关流程进度的更新。

最内部的Ajax调用使用上述2个Ajax调用中的信息。这就是为什么如果我同步执行Ajax调用，由于for loops get早于主要内部Ajax调用完成执行，因此最内层Ajax调用会获取错误的数据。

请查看以下示例代码中的以下代码行：

// ISSUE: This line of code takes effect on the HTML page after all the ajax calls get completed
$("<label>" + responseText + "</label><br />").appendTo('#DlgHdBodyContainer');

示例代码：

        //Asynchronous AJAX function to Retrieve a CRM record using OData
        $.ajax({
            type: "GET",
            contentType: "application/json; charset=utf-8",
            dataType: "json",
            url: odataUri,
            async: false,
            beforeSend: function (XMLHttpRequest) {
                //Specifying this header ensures that the results will be returned as JSON.
                XMLHttpRequest.setRequestHeader("Accept", "application/json");
            },
            success: function (data, textStatus, XmlHttpRequest) {
                var customObjects1 = data.d.results;

                for (var i = 0; i < customObjects1.length; i++) {
                    var CustomObject1Id = customObjects1[i].cc_CustomObject1Id;
                    var ActivityId = customObjects1[i].Activity.Id;
                    var CustomObject1Name = customObjects1[i].Name;

                    if (customObjects1[i].Activity.Id != null) {

                        //Asynchronous AJAX function to Retrieve a CRM record using OData
                        $.ajax({
                            type: "GET",
                            contentType: "application/json; charset=utf-8",
                            dataType: "json",
                            url: odataUri,
                            async: false,
                            beforeSend: function (XMLHttpRequest) {
                                //Specifying this header ensures that the results will be returned as JSON.
                                XMLHttpRequest.setRequestHeader("Accept", "application/json");
                            },
                            success: function (data2, textStatus, XmlHttpRequest) {

                                if (data2.d.results.length > 0) {

                                    var CustomLists = data2.d.results;

                                    var ODATA_EntityCollection = "/cc_cloudcalltransactionsSet";

                                    for (var i = 0; i < CustomLists.length; i++) {

                                        //debugger;
                                        var CustomListId = CustomLists[0].ItemId

                                        var pageNum = "1";

                                        while (pageNum != "-1") {

                                            var AjaxObject = new Object();
                                            AjaxObject.cc_type = {
                                                Value: 21
                                            };
                                            AjaxObject.cc_PIN = pageNum;
                                            AjaxObject.cc_callhash = CustomObject1Id + "," + ActivityId + "," + CustomListId; // 300 characters max

                                            //Parse the entity object into JSON
                                            jsonEntity = window.JSON.stringify(AjaxObject);

                                            //Asynchronous AJAX function to Create a CRM record using OData
                                            $.ajax({
                                                type: "POST",
                                                contentType: "application/json; charset=utf-8",
                                                dataType: "json",
                                                url: ODATA_ENDPOINT + ODATA_EntityCollection,
                                                async: false,
                                                data: jsonEntity,
                                                beforeSend: function (XMLHttpRequest) {
                                                    //Specifying this header ensures that the results will be returned as JSON.
                                                    XMLHttpRequest.setRequestHeader("Accept", "application/json");
                                                },
                                                success: function (data, textStatus, XmlHttpRequest) {

                                                    var NewCRMRecordCreated = data["d"];

                                                    pageNum = NewCRMRecordCreated.cc_PIN;
                                                    var responseText = NewCRMRecordCreated.cc_Response;

                                                    //alert(responseText);

                                                    // ISSUE: This line of code takes effect on the HTML page after all the ajax calls get completed
                                                    $("<label>" + responseText + "</label><br />").appendTo('#DlgHdBodyContainer');
                                                },
                                                error: function (XMLHttpRequest, textStatus, errorThrown) {

                                                    pageNum = "-1";
                                                    return;
                                                }
                                            });
                                        }
                                    }
                                }
                            },
                            error: function (XmlHttpRequest, textStatus, errorThrown) {

                            }
                        });

                    };

                }

            },
            error: function (XmlHttpRequest, textStatus, errorThrown) {

            }
        });

更新代码：
根据 mplungjan 的建议，我更新了以下代码。我将最内层的Ajax调用放在它所依赖的两个Ajax调用之外。我放置代码以在代码中的不同位置更新div Updatediv("some string");。只有在代码完成后，页面才会更新，并且浏览器随控件一起返回。

执行UpdateDiv后，有没有办法对网页进行修改？

// Send each list to Api
for (var i = 0; i < objLists.length; i++) {

    var list = objLists[i];

    var pageNum = "1";

    var responseText = "";

    Updatediv("Synch process started");

    while (pageNum != "-1") {

        Updatediv("Processing page number " + pageNum);

        var CRMObject = new Object();
        CRMObject.cc_type = {
            Value: 21
        };
        CRMObject.cc_PIN = pageNum;
        CRMObject.cc_callhash = list.CustomObject1Id + "," + list.ActivityId + "," + list.listId; // cc_callhash is 300 characters max

        //Parse the entity object into JSON
        jsonEntity = window.JSON.stringify(CRMObject);

        //Asynchronous AJAX function to Create a CRM record using OData
        $.ajax({
            type: "POST",
            contentType: "application/json; charset=utf-8",
            dataType: "json",
            url: ODATA_ENDPOINT + ODATA_EntityCollection,
            async: false,
            data: jsonEntity,
            beforeSend: function (XMLHttpRequest) {
                //Specifying this header ensures that the results will be returned as JSON.
                XMLHttpRequest.setRequestHeader("Accept", "application/json");
            },
            success: function (data, textStatus, XmlHttpRequest) {

                var NewCRMRecordCreated = data["d"];

                pageNum = NewCRMRecordCreated.cc_PIN;
                responseText = NewCRMRecordCreated.cc_Response;
            },
            error: function (XMLHttpRequest, textStatus, errorThrown) {
                pageNum = "-1";
                return;
            }
        });

        Updatediv(responseText);


    } // END:  while (pageNum != "-1")

} // END: for (var i = 0; i < objLists.length; i++)

function Updatediv(responseText)
{
    $("<label>" + responseText + "</label><br />").appendTo('#DlgHdBodyContainer');

}

Answer 1

你可以尝试：

Object

强制重绘。

在Ajax调用的succes事件中更新div

1 个答案: