axios请求后端数据(post请求)qs序列化

405 阅读1分钟

1.qs.parse() 将url解析成对象的形式 2.qs.stringify() 将对象序列化成url的形式,以&进行拼接

qs.stringify() 和 JSON.stringify()的区别

例子

var a = {
    name:"小明",
    age:20
}
1.qs.stringify序列化结果: 
    name=小明&age=20
    
2.JSON.stringify的结果是:
    "{"a":"小明","age":20}"
    
axios请求默认的是application/json:这种格式 {name:"小明",age:20}

1、qs.parse()将URL解析成对象的形式

image-20230511170441488

2、qs.stringify()将对象 序列化成URL的形式,以&进行拼接

image-20230511170559040

那么问题来了

axios为什么请求后端数据(post)时需要使用qs序列化呢

原因

由于后端需要的是表单提交方式,

(post请求)post表单请求提交时,使用的是:content-type就是application/x-www-form-urlencoded,

所以需要将ajax发送请求的application/json改为application/x-www-form-urlencoded 那么content-type就是application/x-www-form-urlencoded 使用qs进行序列化传输的样式是formdata格式的参数 这样的格式:name=xxx&age=xxx

axios如何请求后端数据(post)使用qs序列化呢

使用:(vue)

                                                                                                            //1.安装完之后在需要的组件页面中引入qs
                                                                                                                import qs from 'qs';        //es6语法引入
​
                                                                                                                data(){
                                                                                                                    return {
                                                                                                                        data:{
                                                                                                                            uname:'用户1',
                                                                                                                            pwd:'123456'
                                                                                                                        }
                                                                                                                    }
                                                                                                                },
                                                                                                                methods:{   
                                                                                                                    register(){
                                                                                                                        //axios请求
                                                                                                                        //第一种写法
                                                                                                                        this.$http({
                                                                                                                            method:'post',
                                                                                                                            headers:{
                                                                                                                                'content-type':'application/x-www-form-urlencoded'
                                                                                                                            },
                                                                                                                            url:'地址',
                                                                                                                            data:qs.stringify(this.data),
​
                                                                                                                        }).then((res)=>{
                                                                                                                            console.log(res)
                                                                                                                        })
                                                                                                                    },
                                                                                                                    login(){
                                                                                                                        //axios请求
                                                                                                                       // 第二种写法
                                                                                                                        this.$http.post('/foo',qs.stringify(this.data)).then((res)=>{
                                                                                                                            console.log(res)
                                                                                                                        })
                                                                                                                    }
                                                                                                                }