Node学习（1）表单提交，由浅及深

最新推荐文章于 2025-05-26 02:59:08 发布

古兮!怪哉

最新推荐文章于 2025-05-26 02:59:08 发布

阅读量375

点赞数

CC 4.0 BY-SA版权

分类专栏： Node 文章标签： Node 表单 post get server

本文链接：https://blog.youkuaiyun.com/michael8512/article/details/79176495

Node 专栏收录该内容

7 篇文章

订阅专栏

本文深入探讨了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();
    }
}