用户投稿继上次写完了简单的路由规定后，这次我们要来写一个简单的表单。
但在开始之前要先介绍一下HTTP的动作 GET / POST 这两个最常见的行为
<form id="form1" method="动作" action=""></form>不同的Method就是对同一件事情做不同的操作。
再来举服务生点餐的例子，
假设现在我们要点餐，我们必须先知道菜单是甚么（get），
我们会向服务生点餐（post），
我们想要取消刚才点的餐点（delete），
我们想要重新点一次（put），
我们想要加点甜点和饮料（patch）。
-- LEARNING BY HACKING
GET 和 POST 同样都能传送值
GET 会把要传送的值放在header上，会直接显示在URL，因此不适合传输隐密的资料，同时 GET 会被Cache纪录、且有长度限制POST是把资料放在讯息主体内进行传送，不会被Cache纪录且对资料长度没有限制，
因此POST比GET更安全，所以较适合用来传送隐密性较高的资料
第三个应用：简单的表单 - GET
先建立一个表单页面 form.html
<!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="GET" 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>在这边会注意到action指向了一个叫作sendcomment的动作，这边之后会另外写程式处理
因为新增了一个form.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'); }); app.get('*', function(req, res) { res.send('404 not found'); }); var server = app.listen(8082, function() { console.log('Listening on port 8082'); });$ node server.js就会有以下的画面了
再来就是要来处理GET触发的动作了
点送出后就会得到
http://127.0.0.1:8082/sendcomment?name=&email=&comment=
这一串URL经过解析(parse)后就会得到
动作: sendcomment
资料: name, email, comment
只要能够取得name email comment这些我们想要使用的资料就行了
再原本的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'); }); //刚刚那个GET动作写在此 app.get('/sendcomment', function(req, res) { //这边可以得到刚刚的三个资料(name,email,comment) console.log('name:' + req.query.name); console.log('email' + req.query.email); console.log('comment' + req.query.comment); //回传谢谢回覆 res.send(req.query.name + '谢谢你的回覆'); }); app.get('*', function(req, res) { res.send('404 not found'); }); var server = app.listen(8082, function() { console.log('Listening on port 8082'); });执行画面
在终端机那边会得到这三个参数
express deprecated res.sendfile: Use res.sendFile这一行只是叫你把 res.sendfile 改成 res.sendFile
(res.sendfile 是 res.sendFile 的alias)
但是使用GET会受到长度的限制加上所有参数都都暴露在URL上，
并不是一个好方法，因此接下来会介绍POST的方法
微信扫一扫打赏
支付宝扫一扫打赏
