关于在HTTP请求BODY中使用JSON格式

Catálogo
  1. 1. 浏览器端
    1. 1.1. XMLHttpRequest
    2. 1.2. jQuery
  2. 2. Node.js的npm包之request
  3. 3. 参考资料

在使用 HTTP POST 或者 PUT 方法向服务器发送非multipart类型的数据时,有两种最常用的对消息主体进行编码的方法,它们分别对应不同的Content-Type

Content-Type 类型说明 示例
application/x-www-form-urlencoded 以 URLEncoded 的方式进行编码 name=test&sub%5B%5D=1&sub%5B%5D=2 解码后就是:name=test&sub[]=1&sub[]=2
application/json 消息主体是序列化后的 JSON 字符串,要求服务器端能够支持JSON {"name":"test","sub":[1,2]}

HTTP 为超文本传输协议,整个的 HTTP 报文,如果按编程语言里面的类型来分的话,就是一大段字符串。值得注意的是,不像 JSON,application/x-www-form-urlencoded 的方式对复杂类型(例如数组)的处理,并没有严格的标准。有的接口使用 key[]=a&key[]=b 来表示数组 key: ['a', 'b'],(这也是最常见的,jQuery、superagent等客户端会如此编码),有的库则将数组编码为:key=a&key=b,有的则是携带下标进行编码:key[0]=a&key[1]=b……十分混乱。所以如果是数组且数组的每一项为简单基本类型,而且非要用 application/x-www-form-urlencoded 进行序列化,那么不如用英文逗号分隔的字符串来表示。如果是嵌套对象……那么还是尽早使用 JSON 吧。

浏览器端

HTML表单默认是按照application/x-www-form-urlencoded进行编码的。

XMLHttpRequest

如果使用浏览器原生的HTTP请求方法XMLHttpRequest,那么只需在open一个请求之后、send该请求之前,设置一下请求首部的Content-Type字段即可。示例代码如下:

1
2
3
4
5
6
7
8
9
10
11
12
13
var xhr = new XMLHttpRequest();
xhr.open('POST', 'http://url', true);
xhr.setRequestHeader('Content-Type', 'application/json');

/* 所有相关的事件绑定必须在调用send()方法之前进行 */
xhr.onreadystatechange = function(){
var state = xhr.readyState;
if(state == 4 && xhr.status == 200){
/* 响应成功, do something */
}
};

xhr.send(JSON.stringify(object));

参考:XMLHttpRequest | MDN

jQuery

如果使用jQuery,默认情况下,其contentType值为:application/x-www-form-urlencoded; charset=UTF-8。可以通过将其设为application/json,然后将数据进行JSON序列化,就可以正确地发送JSON数据了。

urlencoded格式的Ajax请求:

1
2
3
4
5
$.ajax({
url: 'some_url',
type: 'POST',
data: object
});

JSON格式的Ajax请求(需要手动进行JSON):

1
2
3
4
5
6
$.ajax({
url: 'some_url',
type: 'POST',
contentType: 'application/json',
data: JSON.stringify(object)
});

Node.js的npm包之request

在Node.js环境中,如果使用了流行的npm模块request,那么这样写是模拟URLEncoded编码进行提交的:

1
2
3
4
5
request.post('http://service.com/upload', {
form: {
key:'value'
}
});

而要想以JSON格式执行POST请求,那么应该这样:

1
2
3
4
5
6
7
8
request({
url: '',
method: 'POST',
json: true,
body: {
key:'value'
}
});

request模块对body的说明:

body - entity body for PATCH, POST and PUT requests. Must be a Buffer or String, unless json is true. If json is true, then body must be a JSON-serializable object.

是说,body必须是个Buffer类型或者String类型,除非json选项为true。如果json为真,那么body必须是一个可以被JSON序列化的对象。

参考资料

四种常见的 POST 提交数据方式

Compartir