让axiox发送给服务器的数据与JQ的一致
早期用JQ写前端时,使用$.ajax方法发送数据给服务端,假设数据格式为一个javascript对象:
{ user:'abc',phone:'13000000000' }
发送代码为:
$.ajax({
type: "GET",
url: "some.php",
data:{ user:'abc',phone:'13000000000' },
success: function(msg){}
});
如果发送类型为GET,则传送到服务器的数据为如下格式并会附在url上:
user=abc&phone=13000000000
JQ会将数据进行序列化处理
如果发送类型为post,默认情况下contentType的类型为 (application/x-www-form-urlencoded),数据同样会被序列化处理但不会被附在url上:
$.ajax({
type: "POST",
url: "some.php",
data: { user:'abc',phone:'13000000000' },
success: function(msg){}
});
这时候打开控制台查看request的header,可以看到GET请求的数据出现在
Query String Parameters属性中,而POST请求的数据出现在Form Data属性中
后来使用axiox时,GET请求发送的数据放在params属性里,默认params会进行序列化处理因此不用修改什么。
axios({
method: 'get',
url: 'some.php',
params:{ user:'abc',phone:'13000000000' }
});
主要是post请求,axiox的POST请求发送的数据放在data属性里,默认情况下contentType的类型为(application/json;charset=UTF-8),打开控制台查看request的header可以看到数据体现在Request Payload中,一般后台不能直接获取到所需数据,因此若想要使axiox跟JQ一致的话,就需要对传送的数据进行序列化,做法非常简单,因为axios已经内置了序列化模块,首先引入
import qs from 'qs'
然后将数据用qs处理后再赋值:
axios({
method: 'post',
url: 'some.php',
data:qs.stringify({ user:'abc',phone:'13000000000' })
});
这时候再打开控制台查看header,就会发现数据已经出现在Form Data属性中,并且contentType的类型变成了(application/x-www-form-urlencoded)
,注意如果仅仅将contentType修改为(application/x-www-form-urlencoded)而不对数据进行序列化的话,数据就会整个字符串被当成Form Data的键值。
注1:如果是发送图片文件等二进制数据,则不需要这样进行序列化
注2:如果js对象中存在镶套的数组或对象,序列化的结果十有八九不是我们想要的,此问题待续