附加Ajax结果"live"从成功函数

Append Ajax results "live" from success function

本文关键字：quot 成功 函数 live 附加 Ajax 结果      更新时间：2023-09-26

问题:为什么从AJAX成功函数附加到DOM的元素直到成功函数返回后才出现?

Context:我使用AJAX来获取一个JSON对象，其中包含大约6000个内部对象，我想用它来填充一个表。不幸的是，它需要大约10秒来创建表，所以我想给用户一些视觉反馈，而它加载。我认为用户将能够看到表行"活"，因为我叫append，但他们不加载，直到成功返回。当这不起作用时，我尝试更新引导进度条的宽度，但进度条只是在处理过程中冻结。

目标:我希望用户看到表的行，因为他们被追加或进度条在更新正确。

代码:

AJAX调用:

$.ajax({
        type: "GET",
        url: myUrl,
        contentType: "application/json; charset=UTF-8",
        dataType: "json",
        success: function(results){
            for(var i in results) {
                $("#bar").css("width", s / results.length + "%");
                console.log(i);
                var t_cell = $('<td class="'+attrs[i]+'">');
                t_cell.css("background-color", results[i]["val0"]);
                t_cell.append($("<span class='val'>").text(results[i]["val1"]));
                t_cell.append($("<span class='raw'>").text(results[i]["val2"]]));
                t_row.append(t_cell);
                $("#review_table > tbody").append(t_row);
            }
            $('#progress').hide();
        }
    });
HTML: 

<div id="progress" class="progress progress-striped active">
  <div id="bar" class="bar" style="width: 1%;"></div>
</div>
<div id='review_div'>
    <table class='table table-condensed' id='review_table'>
        <thead></thead>
        <tbody></tbody>
    </table>
</div>

Try

$.ajax({
    type : "GET",
    url : myUrl,
    contentType : "application/json; charset=UTF-8",
    dataType : "json",
    success : function(results) {
        var i = 0;
        function process() {
            while (i < results.length) {
                console.log(results[i])
                $("#bar").css("width", s / results.length + "%");
                console.log(i);
                var t_cell = $('<td class="' + attrs[i] + '">');
                t_cell.css("background-color", results[i]["val0"]);
                t_cell.append($("<span class='val'>").text(results[i]["val1"]));
                t_cell.append($("<span class='raw'>").text(results[i]["val2"]));
                t_row.append(t_cell);
                $("#review_table > tbody").append(t_row);
                i++;
                if (i % 25 == 0) {
                    setTimeout(process, 0);
                    break;
                }
            }
        }
        process();
        $('#progress').hide();
    }
});

你可以尝试这样做:

for(var i in results) {
    createRow(i);
}

和

function createRow(i){
    var t_cell = $('<td class="'+attrs[i]+'">');
    t_cell.css("background-color", results[i]["val0"]);
    t_cell.append($("<span class='val'>").text(results[i]["val1"]));
    t_cell.append($("<span class='raw'>").text(results[i]["val2"]]));
    t_row.append(t_cell);
    $("#review_table > tbody").append(t_row);
}

然而，我真的不认为你应该在一个表中呈现6000行。尝试使用库对表进行分页。datatable中有一节介绍了如何对Bootstrap表进行分页。

http://www.datatables.net/blog/Twitter_Bootstrap

与其将其视为分页，不如实际编写一个循环，以较小的块获取记录;也许可以一次记录100条。当您将100条记录追加到DOM时，您的循环会在后台继续获取和追加。您必须小心地按照您希望的顺序保存它们，因为不能保证数据将按照请求的顺序返回。我可能会尝试使用.after()以正确的顺序附加数据。我认为只要稍加修改，就能产生干净高效的用户体验。

相关文章：