У меня есть файл 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){
}
});
});



![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)


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