Express框架如何接收POST方法的请求参数

最新推荐文章于 2024-03-07 14:18:53 发布

「已注销」

最新推荐文章于 2024-03-07 14:18:53 发布

阅读量4.6k

点赞数 11

分类专栏： Node.js 文章标签： javascript js nodejs post

本文链接：https://blog.csdn.net/longestory/article/details/109021012

版权

Node.js 专栏收录该内容

7 篇文章 2 订阅

订阅专栏

问题描述

使用 Express 框架时，通过 POST 方式处理客户端的请求参数，但是通过 req.query 接收到的一直都是 {}。

问题还原

为了清晰地记录这个问题，我将问题进行抽离单独还原这个问题的场景。现在抽离之后的工程目录如下：

|--app.js
|--index.ejs
|--package.json

这里使用了 ejs 模板引擎，所以要先安装 ejs 和 Express 框架：

npm install --save--dev express
npm install --sve--dev ejs

然后 app.js 文件作为主要的处理文件，代码如下：

const express = require("express")
const app = express()
const port = 8080

// 设置模板文件所在的目录
app.set("views", "./")
// 设置使用的模板引擎
app.set("view engine", "ejs")
// 主页路由
app.get("/", (req, res) => {
  res.render('./index.ejs')
})
// 处理POST方式的请求
app.post("/test", (req, res) => {
  // 接收请求参数
  console.log(req.query)
})

app.listen(port, () => console.log(`Example app listening on port ${port}!`))

在访问主页时需要显式一个表单，用来提交 POST 方式的请求：

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>问题还原</title>
</head>

<body>
  <form action="/test" method="POST">
    <input type="text" id="inputValue" name="inputValue">
    <input type="submit" value="提交">
  </form>

</body>

</html>

最后通过 node app.js 命令启动服务，这时访问 http://127.0.0.1:8080 时可以在浏览器中看到这个表单了。

在这里插入图片描述

在输入框输入任意内容，然后点击【提交】按钮，这时看一下控制台的打印信息：

在这里插入图片描述

解决方案

查询了一下 Express 框架的官网 API 文档，发现遇到这个问题有两个错误。

Express 框架接收 POST 方式的请求参数使用的不是 req.query 而是 req.body
Express 框架在接收 POST 方式的请求参数之前需要设置 app.use(express.json()) 和 app.use(express.urlencoded({ extended: true }))

改造之后的 app.js 文件的代码如下：

const express = require("express")
const app = express()
const port = 8080

app.set("views", "./")
app.set("view engine", "ejs")

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

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

app.post("/test", (req, res) => {
  console.log(req.body)
})

app.listen(port, () => console.log(`Example app listening on port ${port}!`))