在呈现hbs部分(nodejs、mogodb、express)时，有没有任何方法可以更新与PARTIAL一起发送的数据，

Question

在呈现hbs部分(nodejs、mogodb、express(时，有没有任何方法可以更新与PARTIAL一起发送的数据，而无需实际重新加载网页？

例如，我有一个注释的post路由，查询数据库并呈现一个视图以及从数据库中提取的一些json数据。现在，我想在不刷新页面的情况下显示任何新添加的评论。我可以用ajax做到这一点，但唯一的问题是路由发送部分视图和数据，如何在不重新渲染页面的情况下显示新添加的数据(注释(。

附言：我完全是个初学者。

查看文件片段：

<!-- Comments Form -->
{{#if user}}
{{#if post.allowComments}}
<div class="card my-4">
<h5 class="card-header">Leave a Comment:</h5>
<div class="card-body">
<form action='/admin/comments' method='post'>
<div class="form-group">
<textarea name='body' class="form-control" required rows="3"></textarea>
<input type="hidden" name='id' value="{{post.id}}">
</div>
<button type="submit" class="btn btn-primary">Submit</button>
</form>
</div>
</div>

{{else}} <h3>Comments are Not Allowed on this Post</h3><hr>
{{/if}}
{{else}} <h3>You need to <a href="/login">Log in </a>to Comment</h3><hr>
{{/if}}

<!-- Single Comment -->
{{#each post.comments}}
<div class="media mb-4">
<img class="d-flex mr-3 rounded-circle" src="/uploads/profile.jpg" alt="" height="40" width="40">
<div class="media-body">
<h5 class="mt-0">{{user.username}}</h5>
{{body}}
</div>
</div>
{{/each}}

呈现上述视图的路线：

router.get('/post/:id',(req, res)=>{
Post.findOne({_id:req.params.id})
.populate({path: 'comments', populate: {path: 'user',models: 'users'}})
.populate('user')
.then((post)=>{
Category.find({}).then((categories)=>{
res.render('layouts/post',{post,categories})
})
})
})

因此，基本上，我想更新与帖子视图一起发送的{post，categories}，并在前端显示新添加的评论，而无需重新呈现整个页面。

到目前为止，我可以添加新评论，但每次添加新评论时，都会显示页面刷新。

Answer 1

如果浏览器中的实时页面想要在不刷新页面的情况下获得更新，您可以选择一些方法。

1. 返回HTML段的Ajax调用您可以在服务器上创建一个专门用于更新的路由，该路由返回页面HTML的一部分(只是您希望更新的部分(。然后，您的页面Javascript将发出Ajax调用，获取HTML，并使用前端Javascript的DOM操作将页面上的一部分HTML替换为新检索的HTML。在服务器上，您不会呈现整个页面，而是只呈现页面的一部分(前端希望替换的部分(。如果您适当地组织HBS部分，那么您可以在这个Ajax调用和整个页面的呈现之间共享相同的部分。

2. 返回JSON的Ajax调用。您在服务器上专门为只返回JSON数据的更新创建了一个路由。然后前端负责将JSON转换为HTML并将其插入到页面中。如果需要，可以使用客户端HBS来呈现JSON。这基本上与上面的选项#1的结构相同——唯一的区别是数据在哪里被更改为HTML。

3. 使用webSocket或socket.io连接异步传递数据，而不是轮询Ajax调用以上两个选项中的任何一个都可以用从客户端到服务器的webSocket或socket.io连接来替换Ajax调用。然后，只要服务器注意到客户端可能希望显示的内容发生了变化，它就可以自由地发送客户端更新(通过webSocket/socket.io连接(。这更像是一个"；"推"；模型比"；轮询Ajax"；模型

此外，您的问题还不清楚，但如果您的POST来自浏览器自动提交POST的表单帖子，那么页面将始终根据POST的响应进行刷新。这就是自动表单帖子的工作原理。如果您不希望刷新页面，则必须将POST更改为Javascript提交的POST，客户端Javascript从POST接收响应，然后可以决定如何处理返回的数据，浏览器将不会自动显示或刷新任何内容。