Загрузить еще кнопку в nodejs

У меня есть файл json на странице series.pug. Когда я нажимаю кнопку «Загрузить больше», я хочу сделать запрос JSON-файла и добавить новый элемент на страницу. Как я могу увеличить нагрузку с помощью NodeJS или AJAX на странице мопсов?

extends layout
block content
    .content(style='padding-bottom: 100px;')
     #titles
      .container
        .row
         .col-md-12
          .form-group.text-center
           label.col-md-2.text-right Quick Filter
           input.search.col-md-6.text-center(type = "text",placeholder='Search series quickly')
        .row.list
         -var count = 0
          each value in data.entries
            -if (value.programType =='series')
             if (count!=18)
              .col-md-3.col-sm-6.col-lg-2.series(data-item-id=++count)
               figure.figure
                a(href='/details/'+value.title)
                 img.figure-img.img-fluid.rounded(src=value.images['Poster Art'].url, alt=value.title)
                 .name.figure-caption.text-center.text-dark=value.title
          .col-lg-12
           a.btn.btn-primary.text-light.load Load More
           script.
            $('.load').click(function(){
                var lastchild = $('.series').last().data('item-id');
                $.ajax({
                    url: '/request',
                    method: 'POST',
                    data:{'lastchild':lastchild},
                    success: function(response){ 

                    }
                 });
                });
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Безумие обратных вызовов в javascript [JS]
Безумие обратных вызовов в javascript [JS]
Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
JavaScript Вопросы с множественным выбором и ответы
JavaScript Вопросы с множественным выбором и ответы
Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...
0
0
1 218
1

Ответы 1

Вам необходимо создать новый маршрут, для которого вы можете выполнить вызов API, который возвращает только частичный HTML. Так что-то вроде этого:

$.ajax('/loadmore?data=jsonFileName&template=pugTemplateName&startIndex=10&load=20');

Затем в node у вас будет логика, которая прослушивает этот маршрут, и когда он входит, у вас есть node, создающий ваш html, используя ваш шаблон мопса.

Итак, параметры запроса в этом примере будут такими:

data = .json file to pull data from
template = .pug file to use as template, should not `extend layout`
startingIndex = starting index for getting data from .json file
load = number items to render html for

Наконец, вам нужно использовать шаблон мопса, который не поддерживает extend layout, поэтому вы получите обратно только <div>, а не весь документ <html>. В шаблоне мопса извлеките файл json, переберите количество элементов, которое вы хотите (указанное с помощью startIndex, и загрузите), а затем отправьте результат файла мопса обратно в браузер.

Результатом вызова AJAX будет частичный HTML-код, такой как <div> или <ul>, но не весь документ <html>. Затем вы можете просто добавить его на свою веб-страницу, где он должен отображаться.

Очевидно, это всего лишь приблизительное руководство о том, как это сделать, но если вы настроите подобную логику, вы можете использовать этот вызов для любых функций load-more, которые могут вам понадобиться на вашем сайте. Если вы опубликуете исходный код на github, я, возможно, смогу дать больше подробностей.

Другие вопросы по теме