使用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

回答

相关问题