javascript - Node/Express BodyParser 不从输入字段返回数据或返回 "undefined"

Question

我有一个基本的 express 设置。我正在尝试做一些在教程上看起来很简单但对我来说根本不起作用的事情。我正在 try catch 用户在两个输入中输入的数据，一个文本输入和一个下拉输入。

我的 app.js 文件如下所示:

var express = require('express');
var bodyParser = require('body-parser');
var path = require('path');
var pug = require('pug');

// initialize express
var app = express();

// set up port
var port = process.env.PORT || 1337;

// setting up bodyParser middleware
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({ extended: true}));

// setting up views
app.set('views', path.join(__dirname, 'views'));
app.set('view engine', 'pug');
app.use(express.static(path.join(__dirname, 'public')));

// initial homepage get
app.get('/', function(req, res) {
    res.render('index');
});

app.post('/', function(req, res) {
    var input = req.body.userInput;
    var quantity = req.body.quantity;

    console.log("input is: " + input);
    console.log("quantity is: " + quantity);
});

// listening on port
app.listen(port, function(err) {
    if (err) throw err;
    console.log("Server is running on port " + port);
});

我的 pug 文件格式如下所示:

.card
   .card-body
     form(action='/', method="POST")
       .form-row
          input.form-control(type='text', placeholder="Search for an item by its id", name="userInput")
       .form-row.mt-2
          .form-group
             select.form-control(name="quantity")
                option(value='1') Qty: 1
                option(value='2') Qty: 2
                option(value='3') Qty: 3
                option(value='4') Qty: 4
                option(value='5') Qty: 5
   .card-footer
        button.btn.btn-outline-secondary(type='submit')
           i.fas.fa-shopping-cart.mr-2
           | Add to my cart

一切都正确呈现。我为我拥有的每个表单输入提供了一个“名称”字段，我尝试从 app.js 文件中的 req.body.(name) 获取该数据。但是当我运行它并输入数据时，控制台日志中没有显示任何内容。

Answer 1

问题不在 body-parser 中，而是在您的 HTML 中。如果您从开发人员控制台进行检查，您会发现单击按钮时没有执行任何请求，这是因为该按钮不在表单内，因此什么也不做。

将 .card-footer 取出，让按钮位于表单内，您将收到带有参数的请求。该请求将挂起，因为 post 处理程序不返回任何内容，但您将在控制台中看到该参数。