时间戳

首页 > 解决方案 > 将带有节点的请求发布到 MongoDB 并呈现成功页面？

node.js - 将带有节点的请求发布到 MongoDB 并呈现成功页面？

问题描述

这是我的 HTML 表单：

  <form id="task-form" action="/mytask" method="POST">
    <input type="text" name="name" placeholder="name of task" />
    <input type="text" name="description" placeholder="description" />
    <input type="submit" />
  </form>

我想将数据存储到与以下代码配合使用的 MongoDB 中。不幸的是，单击按钮后我当然可以看到我不想要的 JSON。

app.post("/mytask", urlencodedParser, (req, res) => {

  const task = new Task(req.body);
  task
    .save()
    .then(() => {
      res.send(task);
    })
    .catch(e => {
      res.status(400).send(e);
    });
});

我还想呈现一个感谢页面，其中包含来自request.body. 这也很好。

    app.post("/mytask", urlencodedParser, (req, res) => {
      res.render("thankyou", {
        name: req.body.name,
        description: req.body.description
      });
    });

但我想两者都做。存储数据并呈现另一个页面，类似这样。

app.post("/mytask", urlencodedParser, (req, res) => {
  const task = new Task(req.body);
  task
    .save()
    .then(() => {
      res.send(task);
    })
    .catch(e => {
      res.status(400).send(e);
    });

  res.render("thankyou", {
    name: req.body.name,
    description: req.body.description
  });
});

这似乎是不可能的。错误如下：

[ERR_HTTP_HEADERS_SENT]：C:\Users\User\Desktop\MyExpressApp\views\thankyou.hbs：发送到客户端后无法设置标题

我该如何解决这个问题？

标签： node.jsexpressposthttp-post

解决方案

提及您正在使用的前端会更有帮助。从外观上看，您只是在渲染 JSON 的任务对象。这就是为什么您在第一个代码中单击提交后会看到 json。

错误发生在最后一个代码中，因为您正在发送感谢消息，但在保存操作完成后，您正尝试使用任务对象发送另一个响应。您只能为请求发送一个响应。

可能的方法是使用任何渲染引擎渲染一个新的 html，或者使用 angular 等前端框架，响应接收消息并显示它。

例如，如果您使用 ejs，代码将类似于

app.post("/mytask", urlencodedParser, (req, res) => {
  const task = new Task(req.body);
  task
    .save()
    .then(() => {
      res.render("index", {
        name: task.name,
        description: task.description
    });
    })
    .catch(e => {
      res.status(400).send(e);
    });  
});

index.ejs 文件

<html>
  <head><title><%= title %></title></head>
  <body>
    <p>Thank you</p>
    <p> <%= name %> </p>
    <p> <%= description%> </p>
  </body>
</html>

推荐阅读