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

Append content to an already rendered page with Pug-Jade in express.js

本文关键字：js express Jade Pug      更新时间：2023-09-26

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

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

类似这样的东西：

cliend 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
            }
        });
    });

服务器应用程序.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)
        });
    });
});

在文件上方，渲染方法中使用的更多帖子，需要将数据附加到index.pug中，这是我的索引文件。

我要用块吗？是否可以呈现html并将内容返回给客户端，所以最后我将使用JQuery附加它？

好吧，那太傻了。我所想做的就是将数据从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进行处理。

假设您从服务器返回部分html，所缺少的只是将其附加到客户端。因此，如果您想将其添加到元素#more-data:

success: function(data) {
  $('#more-data').html(data);
}
相关文章：