使用ajax和jquery完成工作後顯示html

下面的代碼是我做的解釋。所以它並不完整。我寫了足以解釋我的問題。使用ajax和jquery完成工作後顯示html

HTML負載 - >呼叫AJAX - > JSON（響應） - >通過jquery的附加表中的行與JSON

每當我使用Ajax和更新頁面以響應數據和與jquery附加一些元素在頁面上，它在屏幕上很快顯示了jquery中逐一添加的過程。

1.我可以一次性顯示所有的表格，當它完成所有元素的循環後附加jQuery的嗎？

2.在我的示例代碼中，它在第一次使用$(document).ready()準備好文檔後調用ajax。在表中顯示數據似乎很慢，因爲它在加載所有html頁面後調用ajax，然後使用ajax響應更新html的某些部分。使用ajax錯誤嗎？

<html> 

<body> 
    I have to html syntax to show data list. 
    <table id="example"> 
     <thread> 
      <th>order</th> 
      <th>title</th> 
     </thread> 
     <tbody> 
     </tbody> 
    </table> 
    <button onclick="javascript:loadajaxfunction(parameter to update)">Update</button> 
</body> 

<script> 
    $(document).ready(function() { 
     loadajaxfunction(); 
    }); 

    loadajaxfunction = function(parameter to update) { 
    $.ajax({ 
     url: 
     type: 
     data: 
     success: function(json){ 
      $tbody = $("#example").find('tbody') 
      $row = $('<tr>'); 

      $.each(json.objects, function(key, value){ 
       $col = $('td>'); 
       $col.text(value); 
       $row.append($col); 
      } 
      $tbody.append($row); 
     } 
    }); 
</script> 

</html>

來源

2016-12-27 Jayground

的原因是因爲這是你在做什麼，通過1在'。每增加1行（）''上$ tbody'循環。嘗試先將表格的html作爲字符串構建，然後使用'.html（$ myVarContainingCustomStringHoldingHtmlForNewTableData）''將'＃example'的html設置爲新的表格數據' –

難以相信您可以看到每個添加的元素。你只能做一個追加。至於顯示整個表格，你可以用css隱藏它，並在回調中顯示錶格 – charlietfl

我明白了。謝謝。我寫了一些代碼，例如'$ col = $（'）; $ href = $（''）; $ href.addClass（「custom class」）; $ href.attr（「hre」，「url」）; $ href.text（「我想要放的值」）; $ col.append（$ HREF）; $ row.append（$ ADDCOL）;'。因爲我認爲編輯比這種方式更容易，比如像在一個字符串中添加所有內容：'var example =「value i want to put」'我認爲稍後編輯和管理是令人討厭的。你怎麼看？ – Jayground

您可以先隱藏表，然後展示這一切的時候，我們有響應。就像這樣：

<table id="example" style="visibility: hidden"> <!-- Change here --> 
    <thread> 
     <th>order</th> 
     <th>title</th> 
    </thread> 
    <tbody> 
    </tbody> 
</table>

在JS：

loadajaxfunction = function(parameter to update) { 
$.ajax({ 
    url: 
    type: 
    data: 
    success: function(json){ 
     $tbody = $("#example").find('tbody') 
     $row = $('<tr>'); 

     $.each(json.objects, function(key, value){ 
      $col = $('td>'); 
      $col.text(value); 
      $row.append($col); 
     } 
     $tbody.append($row); 
     $("#example").css('visibility', 'visible'); // <--- And here 
    } 
});

有什麼不對您使用Ajax的方式。如果您想更快地渲染表格，請嘗試直接從服務器的HTML中返回。

如果您必須在客戶端執行此操作，請嘗試在將其替換爲<table>之前先構建整個表格的HTML，但不要通過逐行添加來訪問DOM。

loadajaxfunction = function(parameter to update) { 
$.ajax({ 
    url: 
    type: 
    data: 
    success: function(json){ 
     $tbody = $("#example").find('tbody') 
     $row = $('<tr>'); 
     // Build html for cols 
     var cols = ''; 
     $.each(json.objects, function(key, value){ 
      cols += '<td>' + value + '</td>' 
     } 
     // Append it in all by once 
     $row.html(cols); 
     $tbody.append($row); 
     $("#example").css('visibility', 'visible'); 
    } 
});

來源

2016-12-27 01:56:11 TrungDQ

使用可見性屬性顯示錶格看起來更好！謝謝。那麼你是否說盡量少使用append（）'更好？這是因爲性能問題？你能解釋爲什麼我應該使用append（）減少（或不是太多）一點點細節的原因嗎？ – Jayground

操作DOM（'append'）比連接字符串更昂貴。所以是的，這是一個性能問題。剛在Google上找到這篇文章，可能會爲您提供幫助：http://moduscreate.com/efficient-dom-and-css/ – TrungDQ

我閱讀了您提供的鏈接。感謝您分享信息鏈接。這對我有幫助。我需要修改我的代碼以更好地使用append（）less！ – Jayground

使用ajax和jquery完成工作後顯示html

回答

相關問題