在nodejs中加载更多按钮

Question

I have json file in series.pug page. 我在series.pug页面中有json文件。 When I click load more button want to make a request JSON file and add new element in the page. 当我单击加载更多按钮时，要创建一个请求JSON文件并在页面中添加新元素。 How can I make load more with using NodeJS or AJAX in pug page ? 如何在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

You need to create a new route that you can make an API call to that returns only partial HTML. 您需要创建一个新路由，您可以对其进行API调用，从而仅返回部分HTML。 So something like this: 所以像这样：

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

Then in node, you'd have logic listening for this route, and when it comes in, you have node build out your html using your pug template. 然后在node中，您将有逻辑侦听此路由，当它进入时，您将使用pug模板使node建立HTML。

So you're query params in this example would be: 因此，在此示例中，您查询的参数为：

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

Finally, you need to use a pug template that does not extend layout , so you only get a <div> back, and not an entire <html> document. 最后，您需要使用不extend layout的哈巴狗模板，因此您只会得到<div> ，而不是整个<html>文档。 In the pug template, pull in the json file, loop through the number of items you want (specified by startingIndex, and load), and then send the result of the pug file back to the browser. 在哈巴狗模板中，拉入json文件，循环浏览所需的项数（由startingIndex指定并加载），然后将哈巴狗文件的结果发送回浏览器。

The result of the AJAX call will be partial html, like a <div> or <ul> , but not an entire <html> document. AJAX调用的结果将是部分html，例如<div>或<ul> ，而不是整个<html>文档。 You can then just append it to your webpage where it should be displayed. 然后，您可以将其附加到应该显示它的网页上。

Obviously, this is just a rough guide on how to do it, but if you set up the logic like this, you can use this call for any load-more functionality you might need on your site. 显然，这只是有关操作的粗略指南，但是，如果您像这样设置逻辑，则可以将此调用用于站点上可能需要的任何load-more功能。 If you post your source code to github, I might be able to give more specifics. 如果您将源代码发布到github，我也许可以提供更多细节。

在nodejs中加载更多按钮

问题描述

1 个解决方案

解决方案1
0 2018-10-12 16:02:00

在nodejs中加载更多按钮

问题描述

1 个解决方案

解决方案1 0 2018-10-12 16:02:00

解决方案1
0 2018-10-12 16:02:00