Node Web学习笔记(6)-Post访问

上一篇学习了URL解析以及如何获取Get访问信息的相关内容,今天学习的内容是获取post访问信息。先了解一下什么是Post访问?

Post是用来向服务器上传递数据。
Post是将表单中的数据放在form的数据体中,按照变量和值相对应的方式,传递到action所指向URL。

设定目标

首先需要一个表单页面,然后在服务器端获取表单的相关内容,最后返回到客户端。
内容比较简单,这里主要是为了学习通过Node如何获取post访问的表单数据,话不多说,先写一个简单的带表单的页面。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<!--index.html-->
<!DOCTYPE HTML>
<html>
<head>
<title>My Test Page</title>
<meta charset="utf-8"/>
</head>
<body>
<form name="index" action="/post" method="post">
姓名:<input type="text" name="name"><br/>
邮箱:<input type="text" name="email"><br/>
地址:<input type="text" name="address"><br/>
<input type="submit" value="提交">
<input type="reset" value="清空">
</form>
</body>
</html>

页面很简单,就是一个post方法的表单,提交的路径是/post,下面就来实现服务器端代码。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
//server.js
var http = require('http');
var fs = require('fs');
var url = require('url');
var querystring = require('querystring');
var server = http.createServer(function(req,res){
var pathname = url.parse(req.url).pathname;
if(pathname == "/index"){
var pageContent = fs.readFile("index.html","utf8",function(err,data){
if(err){
console.log("ERROR: "+ err);
}else{
res.writeHead(200,{"Content-Type":"text/html"});
res.write(data);
res.end();
}
});
}else if(pathname == "/post"){
var post = '';
req.on('data',function(chunk){ //1、监听data事件
post += chunk;
});
req.on('end',function(){ //2、监听end事件
post = querystring.parse(post);
res.writeHead(200,{"Content-Type":"text/html"});
res.write("Your name is : " + post.name + "<br/>");
res.write("Your email is : " + post.email + "<br/>");
res.write("Your address is : " + post.address + "<hr/>");
res.end("That's all data!");
});
}else{
res.writeHead(200,{"Content-Type":"text/html"});
res.end("<h1>I can't find any page</h1>");
}
});
server.listen(8888);
console.log("Please visit the home page @http://localhost:8888/index");

运行该server.js文件,然后访问http://localhost:888/index,输入字段,提交,完成。

注意点

这段代码基本上就是之前学习过的知识,如:页面读取,事件监听,回调函数,URL解析等…
要说新的东西,那就是获取post信息的监听事件。

  1. req.on('data',function(chunk){...}) ,有数据就加到post变量上,并以键值对的形式,可以在代码中添加打印语句,打印post变量到终端查看。
  2. req.on('end',function(){...}),当表单数据读完了以后,就会自动触发end事件,调用回调函数,res对象对客户端进行反馈。

从这段代码中,基本上就可以看出web页面的雏形了,有前台页面,有后台交互。但是这里的表达方式非常不合理,也就是说代码的结构很乱,页面,服务器,路由转发都混为一谈,而且扩展性非常差,如果我还要再加上一个页面,所需的重复代码很多。

所以,接下的学习还是很艰巨的,如何一步一步将代码剥开,从而形成一个一个单独的模块,还需要更多的努力。