请求接口,传递参数发送请求时候,后端会指定传递的参数类型(即request header的content-type)
如果了解jquery.ajax 与axios,可以省略指定,让浏览器根据传递参数类型与添加。
例如登陆接口,要求前端请求的request Content-Type类型 "Content-Type": "application/x-www-form-urlencoded",
如果header中传递数据如下,就不用手动设置Content-Type:
data: paramsData,
transformRequest: [function(data) {
data = Qs.stringify(data); // Qs使用情况在文后
return data;
}],
规则如下:
1 jQuery.ajax的post提交默认的请求头的Content-Type: application/x-www-form-urlencoded
2 axios,在data是内置对象的时候会进行一些自动设置,
(1) 当 data 是 FormData 时,即便设置content-type 的值,也会被强制删除,让浏览器自己设置为multipart/form-data。
(2) 当 data 为 URLSearchParams 对象时设置为 application/x-www-form-urlencoded;charset=utf-8,
(3) 当 data 为普通对象(包含数组)时,会被设置为 application/json;charset=utf-8
/* qs 使用说明
qs是一个npm仓库所管理的包
1. qs.parse()将URL解析成对象的形式。
const qs= require('qs');
let url = "admin=jack&appToken=abcdefg";
qs.parse(url);
console.log(qs.parse(url));
会生成{admin:’jack‘,appToken:'abcdefg'}
2 qs.stringify()将对象 序列化成URL的形式,以&进行拼接
如上,qs.stringify({admin:’jack‘,appToken:'abcdefg'}),变为 "admin=jack&appToken=abcdefg"
如果改变的是数组,默认情况下,它们给出明确的索引,如下代码
qs.stringify({ a: ['b', 'c', 'd'] }); // 'a[0]=b&a[1]=c&a[2]=d'
也可以进行重写这种默认方式为false
qs.stringify({ a: ['b', 'c', 'd'] }, { indices: false }); // 'a=b&a=c&a=d'
当然,也可以通过arrayFormat 选项进行格式化输出,如下代码所示:
qs.stringify({ a: ['b', 'c'] }, { arrayFormat: 'indices' }) // 'a[0]=b&a[1]=c'
qs.stringify({ a: ['b', 'c'] }, { arrayFormat: 'brackets' }) // 'a[]=b&a[]=c'
qs.stringify({ a: ['b', 'c'] }, { arrayFormat: 'repeat' }) // 'a=b&a=c'
在这里需要注意的是,JSON中同样存在stringify方法,但是两者之间的区别是很明显的,如下所示:
{"uid":"yh9999","pwd":"sh9999"} // JSON.stringify(param)
uid=yh9999&pwd=sh9999 //Qs.stringify(param)
如上所示,前者是采用JSON.stringify(param)进行处理,后者是采用Qs.stringify(param)进行处理的
关于form数据提交的文章https://www.cnblogs.com/bester-ace/articles/9234229.html
网友评论