如何在同一路由中使用多个 POST 请求

Question

我目前在我的 EJS 模板中有两个按钮，它们具有 POST 请求方法，但我无法让它们同时工作，因为到目前为止我每个路由只使用了一个 POST 请求.

我有两组待办事项列表，一组在主路径“/”下，由其键值对列表标识：天，另一组标识为列表：“工作”。

在每个列表中，我有一个添加新项目的 post 请求，第二个 POST 请求将基本上重定向到另一个待办事项列表。这些都是从提交按钮生成的。

我试图通过创建分配给重定向按钮的第三条路由来解决这个问题，该路由根据当前的 titleList 值重定向到家庭或工作列表。

但是，我可以从主页列表重定向到工作列表，但是一旦到了那里我就不能重定向回主页了！

当我第二次点击重定向按钮时，控制台显示 302 状态代码。

我不认为此时 get 请求是可能的，因为它会重定向到任何东西，但我不知道如何进一步进行。

我是 Node.js 和 Express 的新手。

我的代码：

HTML

<%- include("header") -%>    
<div class="box" id="heading">
<h1><%=listTitle%></h1>
</div>

<div class="box">
<% for (let i =0; i< newListItems.length; i++) { %>
<div class="item">
<input type="checkbox">
<p><%= newListItems[i] %></p>
</div>
<% }; %>

<form class="item" action="/" method="post">
<input type="text" name="newItem" placeholder="New item?" autocomplete="off">
<button type="submit" name="list" value=<%= listTitle %>>+</button>
</form>

</div>

<form class="" action="/divert" method="post">
<button type="submit" class="btn1" name="redirect" value="identify" style="width: 
100px"><%=btnName%></button>
</form> 

<%- include("footer") -%>

app.js

//jshint esversion:6

const express = require("express");
const bodyParser = require("body-parser");

// globals.
let items = [];
let workItems = [];
let btnIdentify = "Work";

const app = express();
app.use(bodyParser.urlencoded({extended: true}));

//Send static css file to browser.
app.use(express.static("public"));

app.set('view engine', 'ejs');
   

app.get("/", function(req, res) {
const date = new Date();
const options = {
weekday: "long",
day: "numeric",
month: "long"
};

let day = date.toLocaleDateString("en-US", options);
res.render('list', {listTitle: day, newListItems: items, btnName: btnIdentify});
});


app.post("/", function(req, res) {
let item = req.body.newItem;

if (req.body.list === "Work")  { //only uses frist word off the listTitle value.
workItems.push(item);
res.redirect("/work");
} else {
items.push(item);
res.redirect("/");
}
console.log(req.body);
})

app.get("/work", function(req,res) {

res.render("list", {listTitle: "Work list", newListItems: workItems, btnName: btnIdentify });
});

app.post("/divert", function(req,res) {
if (req.body.list !== "Work") {
res.redirect("/work");
btnIdentify = "Work";
} else if (req.body.list === "Work") {
res.redirect("/");
btnIdentify = "Home";
}
})

app.listen(3000, function() {
console.log("Server is running on port 3000")
});

Answer 1

我已经解决了这个问题，post解决了这里的问题后，我更加努力地思考了。

我在重定向按钮中插入了一个 EJS 标记，如下所示：

<form  action=<%= resType %> method="post">

resType 已作为新的键值对添加到服务器端，以呈现在两个 app.get 路由中，如下所示：

res.render("list", {listTitle: "Work list", newListItems: workItems, btnName: btnIdentify, resType: "/work" });

和

res.render('list', {listTitle: day, newListItems: items, btnName: btnIdentify, resType: "/divert"});

因此，每次单击重定向按钮时，它都会根据 resType 的值向路由发送 POST 请求。

然后我需要做的就是写两个 app.posts 来接收这些 post 请求，如下所示：

app.post("/work", function(req,res) {

    res.redirect("/");
    btnIdentify = "Work";

})

app.post("/divert", function(request,responce) {
  if (request.body.list !== "Work") {
    responce.redirect("/work");
    btnIdentify = "Home";
  }
})

如何在同一路由中使用多个 POST 请求

How to use more than one POST request in same route

javascript

ejs

express