Question

我试图使用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调用来完成此操作。任何指导都将不胜感激。

Answer 1

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

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

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

NodeJS通过AJAX调用呈现视图

2 个答案: