NodeJS 通过 AJAX 调用渲染视图答案

【问题标题】：NodeJS render a view from AJAX callNodeJS 通过 AJAX 调用渲染视图
【发布时间】：2021-06-04 00:09:15
【问题描述】：

我尝试使用 AJAX 调用呈现视图：

let data = {}
data.ph_user = ph_user 
data.nav_destination ='bids_review'
   $.ajax({
    type: 'POST',
    data: JSON.stringify(data),
    contentType: 'application/json',
    url: '/users/navigation',

});

路由器的代码是：

router.post('/navigation', (req, res) => {
 try {
  var fname = req.body['ph_user']
  var main_block = req.body['nav_destination']
    if(main_block='bids_review'){
     console.log(fname, main_block, 'zzzz')
     res.render('bids_review', {ph_user: fname, main_block: 'dashboard'});
    } 
   }catch(err){
     console.log(err)
  }  
 })

看起来路由被正确调用，但没有呈现新视图。我在服务器或客户端都没有收到任何错误。我知道我可以通过表单来完成，但想知道是否有办法通过 AJAX 调用来实现这一点。非常感谢任何指导。

【问题讨论】：

标签： node.js ajax express post

【解决方案1】：

您的路由将呈现的 HTML 返回给 AJAX 调用。如果要直接从服务器渲染 HTML，不要使用 AJAX，只需重定向到路由（即使用表单发布数据，或将路由更改为 .get 并重定向到该位置）。

要继续使用 AJAX，您可能希望从路由返回 JSON，并在客户端上呈现它。

【讨论】：

谢谢。我会试试的。
我将 AJAX 调用更改为 GET 并使用 res.redirect('bid_review')。现在我在客户端遇到错误：GET localhost:3000/users/bids_review 404 (Not Found)。我的 Express 项目的 Views 文件夹中有 bid_review.ejs 文件
再次：如果你想使用 AJAX，从路由返回 JSON，然后在客户端渲染。如果要使用服务器端渲染，请将客户端重定向到路由（使用表单发布到路由，或在客户端使用location.href=<my route>）。
知道了。谢谢

【解决方案2】：

我遇到了同样的问题。我做了一个 Ajax 调用来修改数据。更新后，部分页面必须再次显示，但现在显示数据已更新的信息。该代码只是示例代码，但重要的部分在response 中，response.body 是一个流。如果您将其流式传输到部分（innerHTML），那么您的页面将使用res.render 数据进行更新。额外说明：您可以将该代码放在一个单独的函数中，然后您也可以使用带有部分的 PUG :-)

// get form data, save history and post data to database
await this.serializeForm(form)
  .then(data => 
    this.replaceState(form.action).then( () => 
      fetch(form.action, { 
        method: "POST", 
        headers: { 'x-requested-with': 'XMLHttpRequest',
          "Content-Type": "application/json" },            
        body: JSON.stringify(data) 
      }).then( (response) => 
          response
            .body
            .getReader()
            .read()
            .then( ({value}) => {
              let html = new TextDecoder('utf-8').decode(value);              
              this.partialPage.innerHTML = html;
            })
      )));

【讨论】：