Post表单提交:
这里我们首先借助菜鸟网站上的一个post实例说明一下:
var http = require('http');
var querystring = require('querystring');
var postHTML =
'<html><head><meta charset="utf-8"><title>菜鸟教程 Node.js 实例</title></head>' +
'<body>' +
'<form method="post">' +
'网站名: <input name="name"><br>' +
'网站 URL: <input name="url"><br>' +
'<input type="submit">' +
'</form>' +
'</body></html>';
http.createServer(function (req, res) {
var body = "";
req.on('data', function (chunk) {
body += chunk;
});
req.on('end', function () {
// 解析参数
body = querystring.parse(body);
// 设置响应头部信息及编码
res.writeHead(200, {'Content-Type': 'text/html; charset=utf8'});
if(body.name && body.url) { // 输出提交的数据
res.write("网站名:" + body.name);
res.write("<br>");
res.write("网站 URL:" + body.url);
} else { // 输出表单
res.write(postHTML);
}
res.end();
});
}).listen(3000);
上述的例子中,将html文件通过字符串拼接的形式进行封装,再通过res.write()打印出来。
但是,倘若html文档内容很多,则不能采用这种方法。正确的思路应该是:打开并获取相应的html内容,再将其打印出来。具体步骤如下:
第一步:创建一个index.html文件,如下所示:
<!DOCTYPE html>
<html>
<head>
<title>node</title>
<meta charset="utf-8">
</head>
<body>
<form method="post" action="">
<h2>get发送</h2>
名称:<input type="text" name="name"><br/>
URL:<input type="test" name="url"><br/>
<input type="submit" name="" value="提交">
</form>
</body>
</html>
方法有很多:
(1)从Stream流中读取数据
var http = require('http');
var fs = require('fs');
var querystring = require('querystring');
var data='';
var stream=fs.createReadStream('index.html');
stream.on('data',function(chunk){
data+=chunk
})
stream.on('end',function(){//当没有更多数据可获取时
http.createServer(onRequest).listen(3000);
console.log("Server has been created!")
})
function onRequest(req,res){
var urlstr="";
//当接收到post请求时,获取请求的数据
req.on('data', function(chunk){
urlstr+= chunk;
});
//当获取完所有数据后,对数据参数进行解析
req.on('end', function(){
// 解析参数
urlstr = querystring.parse(urlstr);
console.log(urlstr)//在控制台中输出提交的数据
// 设置响应头部信息及编码
res.writeHead(200, {'Content-Type': 'text/html; charset=utf8'});
if(urlstr.name && urlstr.url) { // 输出提交的数据
res.write("网站名:" + urlstr.name);
res.write("<br>");
res.write("网站 URL:" + urlstr.url);
//当没有可以获取的数据时,显示html页面
}else{ // 输出表单
res.write(data);
}
res.end();
});
}
(2)readFile读取数据
fs.readFile('./index.html','utf-8',function(err,d){
data=d
});
主要的方法与上一个例子相同。不同点在于,这里的data不属于stream中的数据,可以全局使用。而上一个例子中,如果data最后只能在stream.on('end',function(){})中使用,否则,数据为空。(3)file文件的方法读取数据
var http = require('http');
var fs = require('fs');
var querystring = require('querystring');
var buf = new Buffer(1024);
var data="";
fs.open('index.html','r+',function(err,fd){
if (err) {return console.error(err)}
fs.read(fd,buf,0,buf.length,0,function(err,bytes){
if (err) {console.log(err)}
console.log(bytes+'字节被读取了');
if (bytes>0) {
data=buf.slice(0,bytes).toString()
//console.log(data)
}
});
})
http.createServer(onRequest).listen(3000);
console.log("Server has been created!")
此处利用了Buffer缓存的方式对数据进行读取.
Get表单提交:
var http=require('http');
var url=require('url');
var util=require('util');
http.createServer(function(req,res){
res.writeHead(200,{'Content-Type':'text/plain;charset=utf-8'})
var params=url.parse(req.url,true);
console.log("网站名: "+params.query.name);
console.log("网站 URL:" + params.query.url);
console.log("search:" + decodeURI(params.search));
res.end(util.inspect(url.parse(req.url,true)));
}).listen(3000);
console.log('createServer is created')
get提交与post提交一个主要的不同点就是,获取参数的方式不同:
get-->url.parse(req.url,true),这里获取到的是一个json对象,可以通过获取对象属性的方式得到各项参数
post-->querystring.parse(urlstr),这里得到的也是json对象
若提交的数据中包含中文字符,则需要利用decodeURLComponent()方法进一步解码
综合性实例:
最后,参考一篇文章中的实例,进行了适当修改,给出了下面的综合性实例。原文参见:http://www.cnblogs.com/leejersey/p/5479012.html
HTML:index.html
<!DOCTYPE html>
<html>
<head>
<title>node</title>
<meta charset="utf-8">
</head>
<body>
<form method="get" action="getlogin">
<h2>get发送</h2>
名称:<input type="text" name="name"><br/>
URL:<input type="test" name="url"><br/>
<input type="submit" name="" value="提交">
</form>
<form method="post" action="postlogin">
<h2>post发送</h2>
名称:<input type="text" name="name"><br/>
URL:<input type="test" name="url"><br/>
<input type="submit" name="" value="提交">
</form>
</body>
</html>
Server端
var httpserver = require("http");
var qs = require("querystring");
var url = require("url");
var fs = require("fs");
httpserver.createServer(onRequest).listen(3000);
function onRequest(request,response){
var pathname = url.parse(request.url).pathname;
if(pathname=="/"){//访问表单页面
response.writeHead(200,{"Content-Type":"text/html"});
fs.readFile("index.html","utf-8",function(e,data){
response.write(data);
response.end();
});
}else if(pathname=="/postlogin"){//处理post方式请求
var urlstr="";
request.addListener("data",function(postdata){
urlstr+=postdata;//接收到的表单数据字符串,这里可以用两种方法将UTF-8编码转换为中文
var jsondata = qs.parse(urlstr);//转换成json对象
var decodedata = decodeURIComponent(urlstr);//对表单数据进行解码
console.log(urlstr);
console.log(jsondata);
console.log(decodedata);
urlstr = decodedata;
});
request.addListener("end",function(){
response.writeHead(200,{"Content-Type":"text/plain; charset=utf-8"});
response.write(urlstr);
response.end();
});
}else if(pathname=="/getlogin"){ //处理get方式请求
var urlstr = url.parse(request.url).query;
var jsondata = qs.parse(urlstr);
var decodedata = decodeURIComponent(urlstr);
console.log(urlstr);
console.log(jsondata);
console.log(decodedata);
urlstr = decodedata;
response.writeHead(200,{"Content-Type":"text/plain; charset=utf-8"});
response.write(urlstr);
response.end();
}else{
response.writeHead(200,{"Content-Type":"text/plain"});
response.write("error");
response.end();
}
}