在 express.js 中使用 Pug-Jade 将内容附加到已经渲染的页面答案

【问题标题】：Append content to an already rendered page with Pug-Jade in express.js在 express.js 中使用 Pug-Jade 将内容附加到已经渲染的页面
【发布时间】：2016-12-12 00:28:57
【问题描述】：

我使用 Pug/Jade 模板在 express.js 中呈现我的内容。我想在客户端创建一个无限滚动。当用户按下按钮时，我可以通过 ajax 调用使用 Pug/Jade 文件将更多内容附加到同一页面吗？

我知道可以在客户端返回结果并在那里渲染，但我问是否可以在服务器端。

类似这样的：

client-index.js

    $('#load-more').click(function() {
        $.ajax({
            type: 'POST',
            url: '/get_more_posts',
            dataType: 'json',
            data: {
                last_received_id: last_received_id
            },
            success: function() {
                // do nothing as the content rendered on the server side
            },
            error: function() {
               // generate an error
            }

        });
    });

sever-app.js

app.post('/get_more_posts', function(req, res) {
    db.select_post({
        last_received_id: req.body.last_received_id
    }, function(query_res) {
        res.render('more-posts', {
            _POST_LIST: helper.prepare_posts_for_rendering(query_res)
        });
    });
});

在渲染方法中使用的文件 more-posts 之上，需要将数据附加到 index.pug 这是我的索引文件。

我为此使用一些块吗？是否可以渲染html并将内容返回给客户端，所以最后我将使用JQuery附加它？

【问题讨论】：

您发布的代码实际上有什么问题？我还没有运行它，但如果你只是在成功回调中对生成的 html 做一些事情，这个想法似乎很好。
@aw04 我不想将 more-posts.pug 的渲染版本原样发送给客户端。我已经渲染了 index.pug 文件。我想将通过 more-posts.pug 呈现的 html 附加到 index.pug 中的容器中。
对不起，我不明白你的第一句话。我以为您是在尝试渲染更多帖子并返回它们？您似乎缺少的只是获取呈现的内容并将其附加到客户端......但我可能误解了您的问题
@aw04 是的，没错。但我不知道怎么做。
@aw04 哦，愚蠢的我。我找到了。我现在就发帖回答。

标签： javascript jquery node.js express pug

【解决方案1】：

假设您要从服务器返回部分 html，那么您所缺少的就是将其附加到客户端。所以如果你想把它添加到一个元素#more-data:

success: function(data) {
  $('#more-data').html(data);
}

【讨论】：

很好。：）谢谢。看我的回答。
哦，你只是没有发回数据，好吧。很高兴你知道了

【解决方案2】：

好吧，那太傻了。我想要做的就是将数据从res.render() 返回到一个变量，然后将该变量发送回ajax 调用。

所以最后我使用了这样的东西：

app.post('/get_more_posts', function(req, res) {
    db.select_post({
        last_received_id: req.body.last_received_id
    }, function(query_res) {
        var rendered = res.render('more-posts', {
            _POST_LIST: helper.prepare_posts_for_rendering(query_res)
        });
        res.status(200).send({ rendered: rendered });
    });
});

并在 ajax 中处理。

【讨论】：