为什么不在 PUT 方法中调用 express 的 res.render？答案

【问题标题】：Why isn't express's res.render called inside the PUT method?为什么不在 PUT 方法中调用 express 的 res.render？
【发布时间】：2021-06-10 03:33:53
【问题描述】：

我有一个带有 ejs 视图引擎的快速应用程序。在 ejs 模板中，我有一个带有 onClick 事件的按钮来触发获取请求：

<button class="remove-btn" onclick="removeGroceryItem('<%= index %>')" >Remove</button>

获取函数

function removeGroceryItem (id) {
    fetch('/', {
        method: 'PUT',
        headers: {
            'Content-Type': 'application/json'
        },
        body: JSON.stringify({ groceryItem: id })
    })
    .then((value)=> console.log(value))
    .catch((e)=>console.error(e))
}

快速应用路由处理程序：

/* PUT grocery list*/
app.put('/', function(req, res, next) {
  groceryItemsContainer.splice(Number.parseInt(req.body.groceryItem), 1)
  res.render('index', { 
    title: 'Express Grocery List App',
    notification: 'removed',
    groceryList: groceryItemsContainer
  })
  res.end();
})

收到状态为 200 的 PUT 请求。但是 res.render 似乎没有被触发 -- 这是为什么呢？？

【问题讨论】：

为什么你认为res.render() 没有被调用？你在fetch() 上的.then() 或.catch() 得到什么结果？您是否在res.render() 之前和之后放置了console.log() 以查看它们是否显示输出？您是否意识到像 fetch() 这样的 Ajax 调用只是为您的 Javascript 获取数据 - 它不会自行更改浏览器页面。
另外，在调用res.render() 之后调用res.end() 是一个错误和错误。 res.render() 已经自己调用了res.end()。所以，请删除res.end()。
正如@jfriend00 所指出的，您在res.render() 有机会做它需要做的事情之前调用res.end()。
从控制台，我看到有一个 PUT 请求，但是没有 GET 请求来获取样式和 javascript。所以我怀疑 res.render 已经运行了。

标签： express fetch ejs render put

【解决方案1】：

从您的评论看来，您希望 res.render() 的结果会显示在浏览器中。这不是使用 fetch() 的 Ajax 调用在您的浏览器 Javascript 中所做的。它只会将内容返回到您的 Javascript。它不会在浏览器中显示任何内容。

因此，res.render() 的内容会返回到网页中的 Javascript，而网页中 Javascript 中的 console.log(value) 实际上应该在控制台中显示来自 res.render() 的内容。如果您希望该内容显示在浏览器中，那么您需要使用您自己的 Javascript 自己将该内容插入到当前浏览器 DOM 中。

【讨论】：

这是有道理的。所以如果我想让ejs用新的变量重新渲染模板，我应该怎么做呢？
@EddieLam - 如果它与您只想要一个全新的更新副本完全相同的页面 URL，您可以让您的浏览器 Javascript 仅使用 window.location.reload() 刷新页面，这将导致浏览器请求再次从您的服务器返回 URL，您可以在其中重新呈现它。或者，您可以仅将新添加的内容作为 Ajax 调用的结果发送回来，并让您的 Javascript 仅将新内容插入当前页面以生成与刷新相同的结果。在这两种情况下，它都无法像现在一样帮助您将完全呈现的页面发送回您的 Javascript。