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中，您将有逻辑侦听此路由，当它进入时，您将使node使用pug模板来构建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，我也许可以提供更多细节。

在nodejs中加载更多按钮

1 个答案: