我不能在 node.js 中使用 router.post 方法答案

【问题标题】：i cannot use the router.post method in node.js我不能在 node.js 中使用 router.post 方法
【发布时间】：2020-02-09 20:32:13
【问题描述】：

我尝试在我的 node.js 应用程序中使用发布请求，但由于某种原因我找不到它不起作用。也许你可以帮我解决这个问题

您可以在下面找到我的 report.js 和我的 report.ejs 文件：

report.js 文件：

var express = require('express');
var router = express.Router();
const { Pool, Client } = require("pg");
var app = express();
var bodyParser = require("body-parser");
/* GET home page. */

router.use(bodyParser.urlencoded({ extended : false }));

router.get('/', function(req, res, next) {
  res.render('report', { title: 'Express' });
});

router.post('/top', function (req, res) {
  console.log(req.body.todo + " is added to top of the list.");
  res.redirect('/');
});

router.post('/bottom', function (req, res) {
  console.log(req.body.todo + " is added to bottom of the list.");
  res.json({ status: 'success' });
  res.redirect('/');
});

module.exports = router;

report.ejs 文件：

  <body>
    <form>
      <div class="form-group">
          <label>To Do:</label>
          <input type="text" class="form-control" name="todo">
      </div>
      <button type="submit" class="btn btn-primary btn-lg" formaction="/top"  method="POST">Add to Top</button>
      <button type="submit" class="btn btn-primary btn-lg" formaction="/bottom"  method="POST">Add to Bottom</button>
  </form>
    <script src="/javascripts/reportjs.js"></script>
  </body>
</html>

我收到两个按钮的错误消息：

GET /report 304 10.606 ms - -
GET /stylesheets/report.css 304 2.708 ms - -
GET /javascripts/reportjs.js 304 0.739 ms - -
GET /stylesheets/headder.css 304 1.229 ms - -
GET /bottom?todo=asdasd 404 2.253 ms - 145

Cannot GET /bottom

我不明白为什么当我使用 POST 方法时应用程序使用的是 GET 方法

【问题讨论】：

这应该与您的 node.js 代码无关，问题出在客户端。
ok :) 但是您知道如何检查客户端的问题吗？在这种情况下浏览器有问题吗？不应该。

标签： javascript node.js express .post

【解决方案1】：

method 属性应该在<form> 标记上，而不是<button> 标记上。默认方法是GET，这就是表单的作用。试试这个：

<form method="POST">
  <div class="form-group">
    <label>To Do:</label>
    <input type="text" class="form-control" name="todo">
  </div>
  <button type="submit" class="btn btn-primary btn-lg" formaction="/report/top">Add to Top</button>
  <button type="submit" class="btn btn-primary btn-lg" formaction="/report/bottom">Add to Bottom</button>
</form>

或者你可以像这样在<button>标签上使用formmethod：

<form>
  <div class="form-group">
    <label>To Do:</label>
    <input type="text" class="form-control" name="todo">
  </div>
  <button type="submit" class="btn btn-primary btn-lg" formaction="/report/top" formmethod="POST"">Add to Top</button>
  <button type="submit" class="btn btn-primary btn-lg" formaction="/report/bottom" formmethod="POST">Add to Bottom</button>
</form>

在我看来，由于两个按钮都使用POST，因此最好将其放在<form> 标签上并避免重复。

formaction 应以/report/top 或/report/bottom 开头，因为页面的当前位置将在/report 内并相对于该位置。如果您只使用/top 或/bottom，则会从/report 位置丢失上下文。

【讨论】：

您好，感谢您提供的信息。我这样做了，但现在无法 POST /top
尝试将其添加到服务器中您的第一个 router.get 之前，以查看您的请求是否正在发送到您的路由器：router.use((req,res,next)=>{console.log(">>>",req.method,req.url,req.body); return next();});
完成，我得到：>>> GET / {} GET /report 304 13.904 ms - - GET /stylesheets/report.css 304 1.645 ms - - GET /stylesheets/headder.css 304 1.096 ms - - GET /javascripts/reportjs.js 304 0.937 ms - - POST /top 404 19.882 ms - 143
从你的输出中，">>>" 只发生了一次（对于 url "/"），其他的都没有进入
谢谢，但它仍然没有成功>>> GET / {} GET /report 304 3.625 ms - - GET /stylesheets/report.css 304 0.598 ms - - GET /stylesheets/headder.css 304 1.222 ms - - GET /javascripts/reportjs.js 304 1.043 ms - - POST /http://localhost:8080/top 404 0.896 ms - 165 错误现在是Cannot POST /http://localhost:8080/top