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 (, )', [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 对象。

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

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

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

Answer 3

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

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

Express.js req.body is null when form submitted

forms

postgresql

request

node.js

express