嘗試在 express 應用程序中執行 console.log(req,body.name) 但它顯示未定義

Question

我正在嘗試使用 express 制作一個簡單的注冊頁面，但是當我 consol.log 發布請求中的名稱時，它顯示未定義，但我包含了

var bodyParser = require('body-parser')
app.use( bodyParser.json() );       
app.use(bodyParser.urlencoded({
  extended: true
}));

但它仍然無法正常工作。 請幫我解決這個問題謝謝。

在 app.js 中

var express = require('express');
var path = require('path');
var app = express();
const handlebars = require('express-handlebars');

const { json } = require('express');
var port = process.env.PORT || 5000;


var bodyParser = require('body-parser')
app.use( bodyParser.json() );       
app.use(bodyParser.urlencoded({
  extended: true
})); 

app.use(express.json());
app.use(express.urlencoded({ extended: false }));


app.use(express.static(path.join(__dirname, '/public')))
app.set('views', path.join(__dirname, "views"));
app.set('view engine', 'hbs');


app.get('/', (req,res)=>{
    res.render('index');
})
app.get('/register', (req,res)=>{
    res.render('register');
})

app.post('/register',(req,res)=>{
    const name = req.body.name;
    console.log(req.body.name);
    res.render('index');
})

app.listen(port, ()=>{
    console.log(`Server is running at port ${port}`);
})

在 register.hbs

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="/stylesheets/style.css">
    <title>Registration Website</title>
</head>
<body>
    <h1>Welcome to our Registration page</h1>
    <div class="container">
        <div class="form-box">
            <form action="/register" method="post"  enctype="multipart/form-data">
                <input type="text" name="name" placeholder="Enter Your name" autocomplete="off">
                <input type="email" name="email" placeholder="Enter Your email" autocomplete="off">
                <input type="password" name="password" placeholder="Enter password" autocomplete="off">
                <input type="password" name="cpassword" placeholder="Confirm your password" autocomplete="off">

                <button type="submit" name="submit">Register</button>
            </form>
        </div>
    </div>
</body>
</html>

在包.json

{
  "name": "practice3",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "dependencies": {
    "body-parser": "^1.19.0",
    "express": "^4.17.1",
    "express-handlebars": "^6.0.1",
    "hbs": "^4.1.2",
    "mongodb": "^4.1.4",
    "mongoose": "^6.0.12"
  }
}

文件結構

Answer 1

您的<form>元素設置為發送使用multipart/form-data編碼的 POST 請求，因此使用 Express 接收的有效負載不能簡單地從req.body元素中獲取值。 multipart/form-data編碼用於編碼和發送文件，因此在像這樣的正常形式中，它是不需要的。

默認情況下，如果未提供enctype屬性，則使用application/x-www-form-urlencoded ，這允許通過 Express 中的請求正文訪問您的 POST 有效負載。

<form action="/register" method="POST">
    <input type="text" name="name">
    <button type="submit">Submit</button>
</form>

app.post("/register", (req, res) => {
    const name = req.body.name; // Fetches the 'name' input's value.
    ...
});

嘗試在 express 應用程序中執行 console.log(req,body.name) 但它顯示未定義

問題描述

1 個解決方案

解決方案1
1 已采納 2021-11-14 04:38:57

嘗試在 express 應用程序中執行 console.log(req,body.name) 但它顯示未定義

問題描述

1 個解決方案

解決方案1 1 已采納 2021-11-14 04:38:57

解決方案1
1 已采納 2021-11-14 04:38:57