用户投稿上次作了一个经由 GET来传送资料的小表单，
这次要来改成使用 POST 传送资料。
先複习一下form的 GET / POST 两个动作差别
GET 和 POST 同样都能传送值
GET 会把要传送的值放在header上，会直接显示在URL，因此不适合传输隐密的资料，同时 GET 会被Cache纪录、且有长度限制POST是把资料放在讯息主体内进行传送，不会被Cache纪录且对资料长度没有限制，
因此POST比GET更安全，所以较适合用来传送隐密性较高的资料
第四个应用：简单的表单 - POST
因为我很懒xD 所以直接延用了上一个form.html，
只要把method改成 POST 就可以了
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>form</title><style>h2 { text-align: center; }div { width: 400px; margin: 10px auto; }label{ width: 100%; display: inline-block; }input, textarea{ width: 100%; display: inline-block; }#send{ margin: 40px auto 0 auto; display: block; width: 50px; }</style></head><body><h2>意见栏</h2><form id="comment" method="POST" action="http://127.0.0.1:8082/sendcomment"><div><label for="name">姓名:</label><input type="text" name="name" id="name"></div><div><label for="email">信箱:</label><input type="text" name="email" id="email"></div><div><label for="comment">意见:</label><textarea name="comment" id="comment" cols="30" rows="10"></textarea></div><input id="send" type="submit" value="送出"></form></body></html>再来是修改 server.js
var express = require('express'); var app = express(); app.get('/', function(req, res) { res.sendfile('./views/index.html'); }); app.get('/about', function(req, res) { res.sendfile('./views/about.html'); }); app.get('/form', function(req, res) { res.sendfile('./views/form.html'); }); //POST 动作 app.post('/sendcomment', function(req, res) { console.log('name:' + req.body.name); console.log('email' + req.body.email); console.log('comment' + req.body.comment); res.send(req.body.name + '谢谢你的回覆'); }); app.get('*', function(req, res) { res.send('404 not found'); }); var server = app.listen(8082, function() { console.log('Listening on port 8082'); });原本的 app.get 因为method改成post所以要改成 app.post
要抓取POST值 可以用 body要抓取GET值 可以用 query要抓取Routing值 可以用 params
-Express ( Nodejs ) 取得 GET 、 POST 与 Routing 值
因为method是POST，相较于GET动作下讯息会被包成query string，
POST的讯息则是会被包在message body内，所以底下也要改为 req.body.<参数>
但是这样改完后，应该会出现 TypeError: Cannot read property 'name' undefined
还需要把 server.js 修改成下面
var express = require('express'); var bodyParser = require('body-parser'); var urlencodedParser = bodyParser.urlencoded({ extended: false }); var app = express(); app.get('/', function(req, res) { res.sendfile('./views/index.html'); }); app.get('/about', function(req, res) { res.sendfile('./views/about.html'); }); app.get('/form', function(req, res) { res.sendfile('./views/form.html'); }); //POST 动作 app.post('/sendcomment',urlencodedParser, function(req, res) { console.log('name:' + req.body.name); console.log('email' + req.body.email); console.log('comment' + req.body.comment); res.send(req.body.name + '谢谢你的回覆'); }); app.get('*', function(req, res) { res.send('404 not found'); }); var server = app.listen(8082, function() { console.log('Listening on port 8082'); });加上了
var bodyParser = require('body-parser'); var urlencodedParser = bodyParser.urlencoded({ extended: false });也把POST地方改成
app.post('/sendcomment',urlencodedParser, function(req, res) ...在第一篇文章时有提到 body-parser 可以解析json、row、文本、URL-encoded格式的表单资料
如果method是POST时，代表资料会是urlencoded type，因此必须加上 body-parser 来 parse 资料
如果是json格式会有不一样的写法
//jsonbodyParser.json()//urlencodedbodyParser.urlencoded({ extended: false })这边有GET和POST更详细的解释 -> 表单中的 GET 与 POST 有什么差别
微信扫一扫打赏
支付宝扫一扫打赏
