Node学习(1)表单提交,由浅及深

本文深入探讨了Node.js中的表单提交,包括POST和GET两种方式。对于POST提交,介绍了从Stream流和文件中读取数据的方法。在GET提交中,讲解了如何解析URL获取参数,特别是处理包含中文字符的情况。最后提供了一个综合性的实例来展示实际应用。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

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>


第二步:读取index.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();
    }
}



评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值