附加<tr>使用 JQuery AJAX 调用逐步转换为 HTML 表（Django 框架）

Question

我是 Javascript、Jquery 和 Ajax 请求的新手，我的脚本执行有问题。

基本上我有一个很长的列表要显示在我的主页上（1200 多个项目）。 我曾经正常加载页面，但由于我的列表需要很长时间才能加载（并且因为它就在页面中间），所以在我的所有 HTML 元素显示之前会有一个巨大的延迟。 例如，我的页脚将是最后一个加载的项目，它会出现在我的导航栏之后几乎整整一秒。

我决定首先使用 AJAX 请求加载我的 HTML，完成我的导航栏和页脚，然后才获取我的列表以将其显示在我的页面中间。

我遇到的第一个问题是，在处理我的脚本时，什么也没有出现。 这意味着即使我的第一个列表项的“tr”已准备好，它也只会在第 1200 个“tr”也准备好时显示。 我需要逐步填充表格。 我可以看到我的“tr”正在我的控制台中生成，但它们仅在完成后（在 12'500 毫秒之后）应用到我的 HTML 中。

我遇到的第二个问题是，在处理相同的脚本时，我的页面对我的请求没有响应。 例如，在脚本完成之前，我无法“检查”或单击页面上的任何按钮。 这是令人担忧的，因为即使第一个问题得到解决，我仍然有一个大约 12'500 毫秒的无响应页面。

我使用的代码如下：

$(document).ready(function(){
    console.log( "Document Ready" );
    $.ajax({
      url: "update_list/",
      type: 'get',
      success:function(response) {
        buildTable(response)
      }
    });
});

前面的代码片段中提供的 url 链接到我的 Django 后端中的此视图：（我要获取的列表项是公司股票）

def update_list(request, *args, **kwargs):
    if request.is_ajax():
        stocks = StockListView().get_queryset().values('symbol', 'company_name', 'market_cap')
        return JsonResponse({"stocks_serialized": list(stocks)})

然后这是用于填充我的 HTML 表的脚本：

function buildTable(data){
  var table = document.getElementById('tableId')
  const values = Object.values(data);
  //this step is because I get a dictionary with an array as its first value. We only need the array for the next part.
  const stock_list = values[0]
  for (var i = 0; i < stock_list.length; i++){
    var row = `<tr>
                  <td>${stock_list[i].symbol}</td>
                  <td>${stock_list[i].company_name}</td>
                  <td>${stock_list[i].market_cap}</td>
              </tr>`
              table.innerHTML += row
    console.log( row )
  }
}

有人知道如何解决这些问题吗？ 我是否需要将我的策略更改为 AJAX 仅在向下滚动触发器上请求我的列表的小增量？ 当时我的列表中只有大约 20 个元素出现，其余的只能通过在我的表格中向下滚动来访问。

感谢大家的帮助！

Answer 1

我在 Jquery 的网站上找到了解决我的问题的方法： https://www.tutorialrepublic.com/faq/how-to-add-remove-table-rows-dynamically-using-jquery.php

function buildTable(data){
  const values = Object.values(data);
  const stock_list = values[0]
  for (var i = 0; i < stock_list.length; i++){
        //We first declare the variables for each <td> we need
        var symbol = stock_list[i].symbol
        var comanyName = stock_list[i].company_name
        var market_cap = stock_list[i].market_cap_rounded
        //We then append them to a string in html fashion
        added_row = '<tr>'
        + '<td>' + symbol +  '</td>'
        + '<td>' + comanyName +  '</td>'
        + '<td>' + market_cap +  '</td>'
        + '</tr>'
        //To finally append this long string to your table through it's ID:
        $('#tableId').append(added_row)
        };
  };

这使我的主页更快，并解决了我的两个问题。

这一步似乎大大减慢了页面速度：

table.InnnerHtml += row