Post 请求
这节课讨论如何处理 POST 请求，POST 是一种请求方式，你可能已经听过很多次，基本而言是要求服务端接收或者存储请求体里带上的数据。
常用如在网页上提交表单，我们不需要在 url 上使用查询字符串的方式将数据带过去，而是在请求体里。因此跟 get 请求里的查询字符串会有点差别
上节课，我们通过查询字符串的方式将请求带过来的数据放到 ejs 模板里，这节课来处理这个表单提交后在服务端如何获取表单数据的操作。
- 表单使用 post 请求
'contact.ejs'
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>contact</title>
</head>
<body>
<form action="/contact" method="post">
<label>
Person
<input name="person" type="text" value="<%= qs.person%>">
</label>
<label>
department
<input name="department" type="text" value="<%= qs.department%>">
</label>
</form>
</body>
</html>
- 在 express 程序中处理 post 请求，express 中的 request 并没有处理请求体的数据，我们需要安装一个叫
body-parser的第三方依赖来作为中间件
npm install body-parser
- 在 express 程序中引入 body-parse
'app.js'
var bodyParser = require('body-parser');
// 请求体的数据将会通过 bodyParser urlencode 方法解析
var urlencodedParser = bodyParser.urlencoded({ extended: false });
- 在 express post 请求的中间件使用 urlencode 方法（这个中间件只是用在此 post 方法上，因此没有使用 app.use 方法），回调方法中可以获取数据，并传到 ejs 模板当中
'app.js'
// POST /contact 获取 urlencode 消息
app.post('/contact', urlencodedParser, function (req, res) {
res.render('contact-success', {
data: req.body
});
})
- ejs view 里面接收数据
'contact.ejs'
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Success</title>
</head>
<body>
<p>
You contact <%= data.person %> in <%= data.department %>
</p>
</body>
</html>
网友评论