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

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

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>

最佳答案

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

<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/

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

上一篇：javascript - 有没有办法让 vue 组件准备好(初始化)

下一篇：javascript - 动态健康栏 - 动态可观察量和依赖关系