我们用nodejs搭建好服务器后,浏览器发送的请求可以是GET请求或者POST请求,服务器想要得到请求中的一些数据,可以通过以下几种方式获得:
我们在这里介绍浏览器以POST方式请求,可以使用以下两种方式:
1. 使用request对象的data和end事件获取
data事件可以接收浏览器传递过来的参数:由于有可能参数比较多,浏览器可能会作多次将参数提交过来,所以我们需要将参数进行拼接。
chunk:就是接收到的参数:
什么时候将参数接收完呢?可以使用req的另一个事件,end事件来结束参数的接收
例子:
要求:需要获取index页面提交过来的用户名和性别。并打印在控制台
Index页面:
<form action="/addPost" method="POST">
<table>
<tr>
<td>姓名</td>
<td><input type="text" name="name"></td>
</tr>
<tr>
<td>性别</td>
<td><input type="radio" name="gender" value="男">男
<input type="radio" name="gender" value="女">女
</td>
</tr>
<tr>
<td></td>
<td><button>新增</button></td>
</tr>
</table>
</form>
App.js页面:
// 获得浏览器通过post方式提交的数据
// 第一种,使用request对象自带的"data"和"end"事件获取
var str="";
req.on("data",function(chuck){
str += chuck;
})
req.on("end",function(){
str = decodeURI(str);
console.log(str);
})
输出结果:
name=鸣人&gender=男
代码解释:index页面form表单提交数据后,服务器端app.js调用data事件获得数据块,并拼接到str中,但是我们并不知道数据块什么接收完成,所有我们调用了end事件用来监听,如果数据块接收完成后,打印str,但是如果直接打印的话,可以看到str接收的数据都是Buffer数组类型的,所以我们需要使用decodeURI进行解码。
但是解码后得到的数据是字符串形式,不利于我们进行后续操作,我们可以引入nodejs的核心模块url,url的parse方法可以对url字符串进行拆分成对象形式。所以app.js代码优化:
var uurl = require("url");
...
// 获得浏览器通过post方式提交的数据
// 第一种,使用request对象自带的"data"和"end"事件获取
var str="";
req.on("data",function(chuck){
str += chuck;
})
req.on("end",function(){
str = decodeURI(str);
// console.log(str);
// 拼接?号,变成url中的search格式
var data = uurl.parse("?"+str,true).query;
console.log(data);
})
输出结果:
{ name: '鸣人', gender: '男' }
2.使用第三方模块formidable
formidable:接收浏览器上传过来参数:
字段:fields
文件: files
帮助我们接收浏览器上传过来的文件,并且将文件保存在path路径下面
例子:
依旧是获得用户信息,在app.js中 使用 formidable,该方法会转换请求中所包含的表单数据,callback会包含所有字段域和文件信息。
步骤:下载formidable npm i formidable
引包 var formidable = require(“formidable ”);
实例化一个对象 var form = new formidable.IncomingForm();
调用方法 form.parse();
parse方法参数:
req:请求报文对象
callback:回调函数,有三个参数:err,fields,files
// err:错误对象// fields:字段,属性 {name: "李白","gender": "男"}
// files:文件
App代码如下:
var formidable = require("formidable");
...
var form = new formidable.IncomingForm();
form.parse(req,function(err,fields,files){
var obj={
name:fields.name,
gender: fields.gender
}
console.log(obj);
})
打印结果如下:
{ name: '卡卡西', gender: '男' }
结果得到的是一个对象,并不需要再进行二次转换。
以上两种方法总结:
两种方法都可以作为接收 post 提交过来的数据
因为上传过来的文件中有一个图片文件,而我们通过data和end事件确实可以接收到参数,但是接收到以后处理起来太麻烦了,建议使用formidable。