我在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){ 

                    }
                 });
                });

#1楼 票数:0

您需要创建一个新路由,您可以对其进行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,我也许可以提供更多细节。

  ask by Zülküf ADSIZ translate from so

未解决问题?本站智能推荐:

1回复

ajax使用json,nodejs和webpack返回401

我正在使用Adobe Analytics API构建Web应用程序,并且在本地一切正常。 当我部署到服务器时,对本地存储的json的提取(即与应用程序存储在同一服务器上)将返回状态码401。我已经仔细检查了文件路径,它是正确的。 我不想使用webpack的json-loader,因为它将在
2回复

在NodeJS+AJAX&XML上返回成功

当我尝试返回成功时,我总是会收到一个错误。 这是我的脚本代码: 我尝试用以下方法返回成功消息: 或这个: 或这个: 等... 而且我总是有一个错误警报。 。 。
1回复

NodeJS:来自远程资源解析的非常大的JSON

我有一个很大的JSON文件(150k行,〜3mb)来自外部资源,我想知道在NodeJS应用程序下使用它的最佳方法是什么。 目前,我的策略是通过ajax调用获取,解析并存储在缓存中: 但是我的经验是这条线: 永远花费(3分钟),甚至在调试时也无法访问该对象。 最后,我的目标是能够处
2回复

从Fetch导出数据以在NodeJS中的其他位置使用

一直试图让我的头脑以下问题。 我有以下代码: HTML中有一个按钮,可以触发此代码,然后我需要能够从promise中检索数据并将其传递到其他文件,因此可以将其作为variable导入那里,以便Handlebars可以将其呈现为HTML。 我了解这是异步操作,并且我混合使用浏览器和节点,只
2回复

使用nodejs在浏览器中显示JSON文件

我正在创建一个本地主机服务器并读取文件路径,然后读取json文件 我正在URL中传递文件路径。 像这样的东西: http:// localhost:3000 / C:/Users/Desktop/generated.json 服务器端代码 这是使用ejs的客户端代码 显示的输
2回复

nodejs-我通过POST发送的参数未定义

server.js: client.js请求: 即使GET请求完全按预期工作,但POST却没有。 每当我尝试传递POST请求时,即使所有参数都显示在Firebug中,它也会陷入困境。 当我尝试将ContentType强制为application / json时,出现“意外令牌u”错误
1回复

Ajax请求运行运行bash脚本的NodeJS函数

这个bash脚本生成了一个JSON文件,我将需要解析该JSON文件并将其发送到客户端Java脚本以显示它。 我试图在不刷新页面的情况下执行此操作,但我也不想使用jquery。 我已经尝试过Axios,但也许我不明白。 这是我的Ajax请求,我无法以此达到我的NodeJs函数,也无法加载该
3回复

AJAX-JSON未定义(jQuery,NodeJS)

我目前正在努力将一个json发布到nodejs路由的ajax挣扎。 我想获取4个按钮组的选定值。 按钮组具有以下ID:质量,成本效益,交付范围和等级。 每个按钮组包含5个单选按钮,这些单选按钮的值带有自己的id,例如quality1或quality2。 这些按钮的值的范围是1到5。