javascript - 使用ajax和jquery完成工作后显示html

下面的代码是我要解释的。因此它还不完整。我写的正好足以解释我的问题。

html加载->调用ajax-> json（响应）->通过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>

最佳答案

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

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

关于javascript - 使用ajax和jquery完成工作后显示html，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/41338038/

用AJAX

javascript - 使用ajax和jquery完成工作后显示html