将带有节点的请求发布到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",res) => {
      res.render("thankyou",{
        name: req.body.name,description: req.body.description
      });
    });

但是我都想做。存储数据并呈现另一个页面,就像这样。

app.post("/mytask",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:无法设置   标头发送到客户端后

我该如何解决?

beida221 回答:将带有节点的请求发布到MongoDB并呈现成功页面?

提及您正在使用的前端会更有帮助。从外观上看,您仅呈现了一个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>
本文链接:https://www.f2er.com/3092925.html

大家都在问