Question

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

html load - ＆gt;打电话给ajax - ＆gt; json（回复） - ＆gt;用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>

Answer 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');
    }
});

完成使用ajax和jquery

1 个答案: