Блог

Я новичок в Javascript, Jquery и Ajax-запросах, и у меня проблема с выполнением моих скриптов.

В принципе, у меня есть очень длинный список для отображения на моей домашней странице (более 1200 элементов). Раньше я загружал страницу в обычном режиме, но поскольку загрузка моего списка заняла бы много времени (и поскольку он находится прямо в середине страницы), возникла бы огромная задержка, прежде чем все мои HTML-элементы отобразились бы. Например, мой нижний колонтитул будет загружаться последним элементом, и он появится почти через целую секунду после моей навигационной панели.

Я решил использовать AJAX-запросы, чтобы сначала загрузить мой HTML-код, выполнить навигационную панель и нижний колонтитул и только потом получить мой список, чтобы показать его в середине моей страницы.

Первая проблема, с которой я сталкиваюсь, заключается в том, что во время обработки моего скрипта ничего не появляется. Это означает, что даже если «tr» моего первого элемента списка готов, он будет отображаться только тогда, когда «tr» 1200-го элемента также будет готов. Мне нужно, чтобы таблица заполнялась постепенно. Я вижу, что мои «tr» генерируются в моей консоли, но они применяются в моем HTML только после того, как все они будут выполнены (после 12500 мс).

Вторая проблема, с которой я сталкиваюсь, заключается в том, что пока этот же скрипт обрабатывается, моя страница не отвечает на мои запросы. Например, я не могу «проверить» или нажать любую кнопку на странице до тех пор, пока скрипт не будет завершен. Это вызывает беспокойство, потому что даже если первая проблема устранена, у меня все еще есть страница, не отвечающая на запросы, в течение примерно 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 элементов моего списка, остальные доступны только через прокрутку вниз в моей таблице.

Спасибо всем за вашу помощь!

Я нашел решение своей проблемы на веб-сайте 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