在nodejs中加载更多按钮

Question

我在series.pug页面中有json文件。 当我单击加载更多按钮时，要创建一个请求JSON文件并在页面中添加新元素。 如何在pug页面中使用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){ 

                    }
                 });
                });

Answer 1

您需要创建一个新路由，您可以对其进行API调用，从而仅返回部分HTML。 所以像这样：

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

然后在node中，您将有逻辑侦听此路由，当它进入时，您将使用pug模板使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文件，循环浏览所需的项数（由startingIndex指定并加载），然后将哈巴狗文件的结果发送回浏览器。

AJAX调用的结果将是部分html，例如<div>或<ul> ，而不是整个<html>文档。 然后，您可以将其附加到应该显示它的网页上。

显然，这只是有关操作的粗略指南，但是，如果您像这样设置逻辑，则可以将此调用用于站点上可能需要的任何load-more功能。 如果您将源代码发布到github，我也许可以提供更多细节。