美文网首页
【翻译】Node.js 教程 —— POST 请求

【翻译】Node.js 教程 —— POST 请求

作者: kyuan | 来源:发表于2019-02-21 23:23 被阅读25次
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>

相关文章

网友评论

    本文标题:【翻译】Node.js 教程 —— POST 请求

    本文链接:https://www.haomeiwen.com/subject/fzdryqtx.html