http协议里定义的四种常见数据的post方法

原文 https://blog.csdn.net/charlene0824/article/details/51199292

 

关于http协议里定义的四种常见数据的post方法，分别是：
application/www-form-ulrencoded
multipart/form-data
application/json
text/xml

Express依赖bodyParser对请求的包体进行解析。默认支持application/json,application/www-form-urlencoded,multipart/form-data.单数对xml没有支持。需要自己代码来实现

www-form-urlencoded
http默认的post请求是这种方式，比如写一个<form>...<input type="submit/></form>.form表单里面的submit按钮默认就是这种www-form-urlencoded方式提交的

node.js下使用Express接收这种提交方式需要使用body-parse插件支持，Express和body-parser的依赖关系在4.0以下版本和4.0以上版本是不同的

var express=require("express);
var bodyParser=require('body-parser');

var app=express();
var server=require('http').createServer(app);

app.use(bodyParser.urlencoded({extended:true}));

var PORT=process.env.PORT||3008;
server.listen(PORT);
1
2
3
4
5
6
7
8
9
10
该代码搭建起了一个简单的server，在git bash中输入

$node app
1
运行起来，就可以接收post的www-form-urlencoded类型的参数

我们在上面的代码中加上一个路由（该路由需要放在监听端口的前面）

app.post('/urlencode',function(req,res){
console.log(req.body);
res.send("success");
});
1
2
3
4
在html中编写form表单，使用post方法发送请求

<form action='/urlencode' method='post'>
<input type='text' name='user' value='charlene'/>
<input type='submit'>
</form>
1
2
3
4
当提交表单时，路由中的req.body取得请求信息，并通过res.send方法将响应信息发送给客户端

form-data
该数据类型也是常见的提交数据的方式，和上面不同的是form表单里需要有enctype标识。即我们在上传文件时，需要爱form标签中做这样的标识：
<form enctype="multipart/form-data"></form>

如果是通过ajax方法提交表单，可以XHR2的FormData方法提交处理上传文件的表单。例如表单中含有上传的文件和其他需要提交的字段

`<form method="post" id="form-article">
<label>文章标题：</label>
<input type="text" name="title" placeholder="请输入标题" class="text-input"></input>
<label>文章封面：</label><input type="file" name="postImg" value="上传图片" id="upload">
<input type="submit" >
</form>`
1
2
3
4
5
6
以上的form表单中，含有需要提交的文章标题字段和文章封面的图像上传。当使用ajax实现表单提交时，需要使用xhr2中的FormData类型。
在下面的代码中，result为将表单提交的字段序列化的结果，为一个key=value形式的字符串。

var upload=document.getElementById("upload");
var formD=new FormData();
for(var i = 0; i < result.length; i++){
var val = result[i].split("=");
formD.append(val[0],val[1]);
}
//如果上传上传的图片不为空，取出上传的图片内容
if(upload.files[0]){
formD.append("file",upload.files[0]);
}
ajax("post","/upload1",null,formD,function(res){
console.log(res);
}
1
2
3
4
5
6
7
8
9
10
11
12
13
ajax为自己封装的ajax发送请求的方法，想了解此方法 见附录

使用nodejs处理form-data数据，需要引入中间件multer或connect-multiparty，这里我使用multer中间件 关于multer中间件的安装及相关方法及属性，请参见我的上一篇博客

在路由文下，编写form表单请求路由时处理的功能

var upload=require('multerUtil');
app.post('/upload1',upload.single("file"),function(req,res){
console.log(req.body);//req.body中存放一般字段中存在的字段值
//将信息存入文章数据库
console.log(req.file);//req.file中存放上传的文件信息

var post = new Post("cheng", req.body.title, req.body.tags,req.body.post,req.body.cates,req.file.path);
post.save(function (err) {
console.log(post);
if (err) {

console.log("error");

}

res.send({
user: "cheng",
title: req.body.title,
tags: req.body.tags,
post: req.body.post,
cates: req.body.cates
});
});
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
});

*注：multerUtil为引入multer中间件，并设置中间件的storage后返回的中间件，设置方法请参照我的上一篇博客

application/json
bodyParser支持此类参数的解析。不过如果需要发送json数据，需要对发送请求的请求头设置，如果是ajax上传，设置请求头方法如下

xhr.setRequestHeader=("Content-Type":"application/json");
1
同时，请求信息的格式需要是json字符串格式，如果是json格式，需要通过JSON.stringify()方法将json格式的数据转化为json字符串格式的数据进行传输，后台node.js 在相应的路由下通过req.body接收请求的信息。

text/xml
这种请求类型不是特别常见，body-parse默认也不解析这种数据格式，目前腾讯、微信在使用这种数据交换格式，node.js中只能自己编写代码处理，把请求体参数按照字符串读取出来，然后使用xml2json包吧字符串解析成json对象。
首先还是使用body-parse得到字符串，然后再转化

xml格式请求需要指定http请求头content-type=text/xml

利用req上定义的事件data来获取http请求流，end事件结束请求流的处理

利用xml2json把上面得到的请求参数流转化为json对象

首先需要安装xml2json

$npm install xml2json

var xml2json=require('xml2json');

app.post('/xml',function(req,res){
req.rawBody='';
var json={};
req.setEncoding('utf8');
req.on('data',function(req,res){
req.rawBody+=chunk;
});
req.on('end',funciton(){
json=xml2json.toJson(req.rawBody);
res.send(JSON.stringify(json));
});
});
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
参考文献：node.js下依赖Express实现post 4中方式提交参数

附录：ajax封装的方法

//创建xhr对象
function createXHR(){
if(typeof XMLHttpRequest!="undefined"){
return new XMLHttpRequest();
}else if(typeof ActiveXObject!="undefined"){
if(typeof arguments.callee.activeXString!="string"){
var versions=[
"MSXML2.XMLHttp.6.0","MSXML2.XMLHttp.3.0","MSXML2.XMLHttp"
],
i,len;
for ( i = 0,len=versions.length; i < len; i++) {
try{
new ActiveXObject(versions[i]);
arguments.callee.activeXString=versions[i];
break;
}catch(ex){

}
}
}
return new ActiveXObject(arguments.callee.activeXString);
}else{
throw new Error("no XHR Object available");
}

}
/**
* ajax请求的方法
* @param {string} met 发送请求的类型 值为'post'或‘get’等ajax能接受的请求类型
* @param {string} url 请求的url
* @param {string/json/formdata} mes 发送请求时的请求信息
* @param {Function} callback 请求成功之后需要调用的回调函数
* @return 处理请求后的结果
*/
var ajax=function(met,url,mes,callback){
var xhr=createXHR();
xhr.onreadystatechange=function(){
if(xhr.readyState==1){
console.log("writing");
}
if (xhr.readyState==4) {
if (xhr.status>=200&&xhr.status<300||xhr.status==304) {
callback(xhr.responseText);

}else{
console.log("request was unsuccessful:"+xhr.status);
}
}
}
xhr.open(met,url,true);
xhr.send(mes);

}