有什么方法可以在渲染 hbs partial(nodejs,mogodb,express) 时更新与 PARTIAL 一起发送的数据，而无需实际重新加载网页？

Question

在渲染 hbs partial(nodejs,mogodb,express) 时，有没有什么方法可以在不实际重新加载网页的情况下更新与 PARTIAL 一起发送的数据？

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

P.s。我完全是初学者。

查看文件片段：

      <!-- 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 视图一起发送的 {post, categories} 并在前端显示新添加的评论，而无需再次重新呈现整个页面.

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

Answer 1

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

Ajax 调用那个 returns HTML 段。 你可以在服务器上创建一个路由来明确更新returns 页面的一部分 HTML（只是您要更新的部分）。然后，您的页面 Javascript 将发出 Ajax 调用，获取 HTML 并使用新检索的 HTML 替换您页面上的一部分 HTML DOM 对您的前端进行操作 Javascript。在您的服务器上，您不会呈现整个页面，而只会呈现页面的一部分（您的前端希望替换的部分）。如果您适当地组织 HBS 部分，则可以在此 Ajax 调用和整个页面的呈现之间共享相同的部分。
Ajax 调用 returns JSON.。您在服务器上创建一个路由，专门用于更新 returns JSON 数据。然后前端负责将 JSON 转换为 HTML 并将其插入页面。如果需要，您可以使用客户端 HBS 来呈现 JSON。这与上面的选项 #1 的结构基本相同 - 唯一的区别是数据更改为 HTML.
的位置
使用 webSocket 或 socket.io 连接异步传递数据，而不是轮询 Ajax 调用。 以上两种选择之一可以用从客户端到服务器的 webSocket 或 socket.io 连接替换 Ajax 调用。然后，只要服务器注意到客户端可能希望显示的某些内容发生了变化，它就可以自由地向客户端发送更新（通过 webSocket/socket.io 连接）。这更像是一个“推送”模型，而不是“轮询 Ajax”模型。

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

有什么方法可以在渲染 hbs partial(nodejs,mogodb,express) 时更新与 PARTIAL 一起发送的数据，而无需实际重新加载网页？

Is there any way to update data sent ALONG WITH THE PARTIAL while rendering a hbs partial(nodejs,mogodb,express) without actually reloading a webpage?

javascript

json

node.js

handlebars.js