在Ajax調用的成功事件中更新div

Question

我正在執行3個嵌套的同步jQuery Ajax調用。 在最內層的Ajax調用的成功事件處理程序中，我更新了HTML頁面上的div。在所有呼叫完成之前，這不會對HTML頁面上的生效。

我的想法是爲頁面上的用戶提供有關過程進度的更新。

最內層的Ajax調用使用來自上述2個Ajax調用的信息。這就是爲什麼如果我同步執行Ajax調用，由於for loops比主要內部大多數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

你可以嘗試：

$("<label>" + responseText + "</label><br />").appendTo('#DlgHdBodyContainer').hide().show(); 

強制重繪。