Javascript函數不更新HTML塊 - 應該嗎？

我有一個CSHTML頁面，它生成一個網頁，其中包含一個調用JavaScript函數（在同一頁面上）的按鈕，該函數會進行AJAX調用並用結果更新塊。它看起來像這樣：Javascript函數不更新HTML塊 - 應該嗎？

function getItems() 
{ 
    $(result_div).html("<b>Processing...</b>");  
    var resultString = ""; 
    $.ajax({ 
     type: "POST", 
     url: '@Url.Action("GetItems", "DataHandler.svc")', 
     data: {}, 
     contentType: "application/json; charset=utf-8", 
     dataType: "json", 
     success: function (data) { 
      resultString = "<b>Items:</b><br />"; 
      var itemNames = data; 
      for (var N in itemNames) { 
       resultString += (itemNames[N] + "<br />"); 
      } 
     }, 
     error: function (HelpRequest, ErrorCode, TheError) { 
      resultString = "Error creating items list:<br />" + TheError; 
     }, 
     async: false 
    }); 
    $(result_div).html(resultString); 
}

當我按下按鈕時，函數被調用，並最終將正確的數據顯示在「result_div」塊;但是，該功能只有在函數返回時纔會更新，而不是立即按照我的意願顯示「正在處理...」。

但是，如果我有這個：

function getItems() 
{ 
    var resultString = "<b>Processing...</b>"; 
    $.ajax({ 
     type: "POST", 
     url: '@Url.Action("GetItems", "DataHandler.svc")', 
     data: {}, 
     contentType: "application/json; charset=utf-8", 
     dataType: "json", 
     success: function (data) { 
      resultString = "<b>Items:</b><br />"; 
      var itemNames = data; 
      for (var N in itemNames) { 
       resultString += (itemNames[N] + "<br />"); 
      } 
     }, 
     error: function (HelpRequest, ErrorCode, TheError) { 
      resultString = "Error creating items list:<br />" + TheError; 
     }, 
     complete: function (Request, Status) { 
      $(result_div).html(resultString);  
     } 
    }); 
    $(result_div).html(resultString); 
}

則它立即顯示「正在處理......」在此之前，被替換的數據。

我錯了，假設.html調用會立即更新嗎？是否在刷新頁面之前等待函數完成？

來源

2017-04-25 Don Del Grande

你在變量'result_div'中有什麼值？ – Tushar

最初？只是「」 –

Ajax是異步的，任何在外部聲明的變量都將在內部不確定;）'result_div'必須是一個容器標籤，如div/span等 – Tushar

我有一種感覺，人們誤解了我的「問題」，所以我會盡量讓它更清晰。

我CSHTML看起來是這樣的：

<body> 
    <div id="result_div"> 
    &nbsp; 
    </div> 
    <br /> 
    <button id="button_getItems" onclick="getItems()"> 
    Get Items 
    </button> 
</body> 

<script type="text/javascript"> 
    function getItems() 
    { 
     $(result_div).html("<b>Processing...</b>");  
     var resultString = ""; 
     $.ajax({ 
      type: "POST", 
      url: '@Url.Action("GetItems", "DataHandler.svc")', 
      data: {}, 
      contentType: "application/json; charset=utf-8", 
      dataType: "json", 
      success: function (data) { 
       resultString = "<b>Items:</b><br />"; 
       var itemNames = data; 
       for (var N in itemNames) { 
        resultString += (itemNames[N] + "<br />"); 
       } 
      }, 
      error: function (HelpRequest, ErrorCode, TheError) { 
       resultString = "Error creating items list:<br />" + TheError; 
      } 
      , async: false 
     }); 
     $(result_div).html(resultString); 
    } 
</script>

會發生什麼事，當我按下「獲取項」按鈕，它會暫停幾秒鐘，而被提取的數據，然後在出現的數據屏幕上方的按鈕 - 就像它應該。問題不在於「數據根本沒有出現」。這部分工作正常。

我期望它做的是，當我按下按鈕時，「正在處理...」應該在檢索和顯示數據之前出現。

這是當我使用getItems（）的另一個版本（刪除了「async：false」的那個版本，resultString最初設置爲「Processing：」，以及添加到「complete：」部分Ajax調用將result_div塊設置爲返回的數據
但是，我不想讓調用異步，因爲我不希望用戶在提取數據時能夠做任何事情。

來源

2017-04-25 19:26:36

當我嘗試時，它運行良好。我使用'http：//google.com：81'作爲網址，因此超時。它顯示'Processing ...'，然後在幾秒鐘後顯示'Error creating items list：'。 – alfredo

Javascript函數不更新HTML塊 - 應該嗎？

回答

相關問題