使用 ajax 和 jquery 完成工作后显示 html答案

【问题标题】：Show html after completing work with ajax and jquery使用 ajax 和 jquery 完成工作后显示 html
【发布时间】：2016-12-27 16:31:46
【问题描述】：

下面的代码是我做的解释。所以它不是一个完整的。我写的刚好足以解释我的问题。

html 加载 -> 调用 ajax -> json(response) -> 通过 jquery 将 json 附加到表行

每当我使用 ajax 并使用响应数据更新页面并使用 jquery 在页面中附加一些元素时，它都会在屏幕上非常快速地显示在 jquery 中逐个附加的过程。

1.用jquery在for循环中添加所有元素后，我可以一次显示所有表格吗？

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>

【问题讨论】：

原因是因为这就是你正在做的，在 $tbody 上的 .each() 循环中逐一添加行。尝试先将表格的html构建为字符串，然后使用.html( $myVarContainingCustomStringHoldingHtmlForNewTableData )将#example的html设置为新的表格数据
很难相信您可以看到添加的每个单独元素。你只做一个追加。至于显示整个表格，你可以用css隐藏它并在回调中显示表格
我明白了。谢谢你。例如，我编写了 $col = $('<td'>); $href = $('<a>'); $href.addClass("custom class"); $href.attr("hre", "url"); $href.text("value i want to put"); $col.append($href); $row.append($addcol); 之类的代码。因为我认为它比这种方式更容易编辑，比如在一个字符串中添加所有内容：var example = "<tr><td><a href="url class="custom class">value i want to put</a></td> <tr>" 我认为以后编辑和管理很讨厌。你怎么看？

标签： javascript jquery html ajax

【解决方案1】：

您可以先隐藏表格，然后在我们有响应时将其全部显示。像这样：

<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 中返回它。

如果您必须在客户端进行，请尝试先构建整个表格的 HTML，然后再将其替换为 <table>，不要通过逐行追加来过多地访问 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');
    }
});

【讨论】：

通过设置可见性属性显示表格看起来更好！谢谢你。所以你是说尽量少用append()比较好？是因为性能问题吗？你能解释一下为什么我应该使用 append() 更少（或不要太多）更多细节吗？
操作 DOM (append) 比连接字符串更昂贵。所以是的，这是一个性能问题。刚刚在 Google 上发现这篇文章可能对您有所帮助：moduscreate.com/efficient-dom-and-css
我阅读了您提供的链接。感谢您分享信息链接。这对我很有帮助。我需要修改我的代码，以减少使用 append() 以获得更好的性能！
在你最后的代码中，也许它是每个函数中的'cols'？你怎么能用你的代码分隔每一行？看来您将所有列与一个字符串放在一起。
是的，你是对的，每个函数都应该是cols，我的错。我真的不希望您所说的“分隔每一行”，我提供的代码与您的行为相同，仅包含 1 行。如果需要循环多行，思路还是一样的，先构建html字符串，然后一次性全部追加到tbody。