axios请求后端数据（post请求）qs序列化

使用QS库处理POST请求中的数据格式

最新推荐文章于 2025-04-14 13:48:00 发布

原创最新推荐文章于 2025-04-14 13:48:00 发布 · 2.3k 阅读

7 ·

CC 4.0 BY-SA版权

文章标签：

#post

axios 专栏收录该内容

1 篇文章

订阅专栏

这篇博客介绍了如何在Vue中使用QS库来处理axios的POST请求，确保数据以application/x-www-form-urlencoded格式发送。通过qs.stringify()将对象序列化为URL形式，解决前后端交互时的数据格式问题。同时提供了两种不同的axios请求写法，演示了如何设置headers和使用QS库进行数据转换。

安装qs
npm install qs --save 命令进行安装
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}

但是有时候后端需要的是表单提交方式，（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

所以采取以下方法：
vue中使用：
1.安装完之后在需要的组件页面引入qs
	import qs from 'qs';        //es6语法引入
	const qs = require('qs');    //CommonJS语法引入 
2. 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)
            })
        }
    }