17 处理POST请求

在上一篇中，我们介绍了如何处理GET请求。现在，我们将讨论如何在Express.js中处理POST请求。POST请求通常用于提交数据给服务器，例如表单数据或JSON对象。

1. 理解POST请求

POST请求是HTTP协议中一种常用的方法，它允许客户端向服务器发送数据。在Express.js中，我们可以通过内置的body-parser中间件（自Express 4.16.0版起，已不再需要单独安装）来解析请求体，从而处理POST请求中的数据。

2. 设置Express应用

首先，让我们创建一个简单的Express应用，以处理POST请求。假设我们有以下目录结构：

/myapp
|-- app.js

在app.js中，我们需要设置Express应用：

const express = require('express');
const app = express();
const port = 3000;

// 中间件：解析应用/json类型的请求体
app.use(express.json());

// POST请求处理路由
app.post('/submit', (req, res) => {
    const { name, age } = req.body; // 从请求体中提取数据
    res.send(`Received data - Name: ${name}, Age: ${age}`);
});

// 启动服务器
app.listen(port, () => {
    console.log(`Server is running at http://localhost:${port}`);
});

3. 发送POST请求

在上述示例中，我们定义了一个POST请求的路由。为了测试这个路由，我们可以使用Postman或cURL命令来发送POST请求。例如，使用cURL命令行工具：

curl -X POST http://localhost:3000/submit \
-H "Content-Type: application/json" \
-d '{"name": "Alice", "age": 25}'

在这个命令中：

• -X POST指定请求方法为POST。
• -H "Content-Type: application/json"设置请求头，告诉服务器我们发送的是JSON格式的数据。
• -d '{"name": "Alice", "age": 25}'指定请求体中的数据。

4. 响应结果

当我们发送上述POST请求后，服务器会返回响应：

Received data - Name: Alice, Age: 25

这说明我们的POST请求处理成功，并且数据能够正确地从请求体中提取。

5. 处理表单数据

除了处理JSON数据外，我们还可以处理表单数据。为了处理application/x-www-form-urlencoded格式的表单数据，我们需要使用express.urlencoded()中间件。以下是一个处理表单提交的示例：

// 中间件：解析应用/x-www-form-urlencoded类型的请求体
app.use(express.urlencoded({ extended: true }));

// POST请求处理表单数据
app.post('/form-submit', (req, res) => {
    const { username, email } = req.body; // 从请求体中提取数据
    res.send(`Form submitted - Username: ${username}, Email: ${email}`);
});

在这个示例中，我们处理一个简单的HTML表单提交。可以使用以下HTML代码进行测试：

<form action="http://localhost:3000/form-submit" method="POST">
    <input type="text" name="username" placeholder="Username" required>
    <input type="email" name="email" placeholder="Email" required>
    <button type="submit">Submit</button>
</form>

当你在浏览器中提交这个表单时，服务器会处理并返回相应的用户信息。

6. 总结

在本章节中，我们介绍了如何在Express.js中处理POST请求。通过设置相应的中间件，我们可以轻松处理不同格式的请求体数据，如JSON和表单数据。掌握POST请求的处理是构建动态网页或API的关键步骤。

下一篇将讨论如何响应JSON数据，让我们继续深入Express.js的世界！