提交表单时 Express.js req.body 为空

Question

我有一个简单的 html 表单：

<div class="signup-form">
  <h2>Signup for an account</h2>
  <form method="POST" action="/submit-signup">
    <input type="text" title="username" placeholder="username" />
    <input type="password" title="username" placeholder="password" />
    <button type="submit" class="btn">Submit</button>
  </form>
</div>

还有一个带有路由的 index.js：

var bodyParser = require('body-parser')
const express = require('express')
const app = express()
const port = 3000


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

const Pool = require('pg').Pool
const pool = new Pool({
  user: 'user',
  host: 'localhost',
  database: 'app',
  password: 'password',
  port: 5432,
})


app.get('/', function(req, res) {
  res.sendFile(__dirname +'/index.html');
});

app.get('/login', function(req, res) {
  res.sendFile(__dirname +'/login.html');
});

app.get('/signup', function(req, res) {
  res.sendFile(__dirname +'/signup.html');
});


app.post('/submit-signup',(req, res) => {
  console.log(req.body)
  const username = req.body.username
  const password = req.body.password

  pool.query('INSERT INTO users (username, password) VALUES ($1, $2)', [username, password], (error, results) => {
    if (error) {
      throw error
    }
    response.status(201).send(`User added with ID: ${result.insertId}`)
  })
})


app.listen(port, () => {
  console.log(`App running on port ${port}.`)
})

每次提交表单时，请求正文都会记录为 {}，并且由于空值（我的数据库中的列设置为非空）而从查询中抛出错误。我已经尝试了旧堆栈溢出帖子中的大多数修复，因此感谢您提供任何帮助

Answer 1

你的问题是因为你没有在 HTML 表单中使用 name 标签。

<div class="signup-form">
  <h2>Signup for an account</h2>
  <form method="POST" action="/submit-signup">
    <input type="text" name="username" title="username" placeholder="username" />
    <input type="password" name="password" title="password" placeholder="password" />
    <button type="submit" class="btn">Submit</button>
  </form>
</div>

Answer 2

您正在使用body-parser 中间件。默认情况下，此中间件会尝试根据给定的 json 值将每个 http 正文解析为 js-object。

当您通过 HTML 表单发送数据时，此数据不是 JSON 表示，而是 HTML 表单生成的数据。Mozilla Specs

要完成这项工作，您需要使用一种方法来读取 HTML 表单发送的正文，或者使用更现代的方法，向您的快速服务器发送 (REST) JSON 请求。

• 要使您的代码正常工作，请使用 body-parser.urlencoded()，因为 HTML 表单数据是一个 url 编码文本 Ref to existing Stackoverflow answer
• 要使您的表单更现代一点，请使用 JavaScript 框架并遵循客户端-服务器模式。看看这个教程REST tutorial with express

Answer 3

在您的 html 输入字段中添加名称属性