post提交数据常见的的两种编码方式

秒速五厘米 2021-08-19 13:09 915阅读 0赞

**目录**

一，application/json

二，application/x-www-form-urlencoded

（1）设置transformRequest

（2）用qs框架

--------------------

post提交数据常见的的两种编码方式有：**application/json 和 application/x-www-form-urlencoded**

# 一，application/json  #

**axios默认提交就是使用这种格式**。如果使用这种编码方式，那么传递到后台的将是序列化后的json字符串。我们可以将application/json与application/x-www-form-urlencoded发送的数据进行比较   
首先是application/json： （默认）

![20191014231140408.png][]  
   
接着是application/x-www-form-urlencoded：   
 ![20191014231603115.png][]  
这里可以明显看出application/x-www-form-urlencoded上传到后台的数据是以**key-value形式**进行组织的，而application/json则直接是个json字符串。如果在处理application/json时后台还是采用对付application/x-www-form-urlencoded的方式将会产生问题。

# **二，application/x-www-form-urlencoded**  #

这应该是最常见的post编码方式，一般的表单提交默认以此方式提交，大部分服务器语言对这种方式都有很好的支持。

Axios传参的两种方式：表单数据和json字符串（Form Data和Request Payload）

由于axios默认使用**application/json**格式来提交数据的（传递到后台的是序列化后的json字符串），但是我想用**application/x-www-form-urlencoded**来提交数据（将数据以FormData形式提交给后台），简单点说，就是想把传递的json数据转为form data，此时有两种方式：（1）设置**`transformRequest`**（2）用qs框架

**`（`**`注意：`在使用vue以及axios的过程中，`通常`需要将数据以表单形式（即FormData）提交给后台**`）`**

## （1）设置**`transformRequest`** ##

axios 请求配置中，`transformRequest`配置允许在向服务器发送前，修改请求数据。

**在axios post请求部分加入红框内的代码！**

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMzIzMjU2_size_16_color_FFFFFF_t_70][]

transformRequest: [function (data) {
          let ret = ''
          for (let it in data) {
            ret += encodeURIComponent(it) + '=' + encodeURIComponent(data[it]) + '&'
          }
          return ret
        }],
        headers: {
           // 'Content-Type': 'application/json;charset=utf-8'
          'Content-Type': 'application/x-www-form-urlencoded;charset=utf-8'
        }

最后在header查看的时候，便是成功了，如下

![20191014231800798.png][]

## （2）用qs框架 ##

**qs 是一个增加了一些安全性的查询字符串解析和序列化字符串的库。**

首先要安装qs，在项目中使用命令行工具输入：

npm i qs

安装完成后在需要用到的组件中：在main.js中进行导入qs，交给vue进行使用

import qs from 'qs'
    Vue.prototype.$qs = qs;//我后面在用this.$qs调用全局qs时失败了，没有调用成功，不知道为什么。所以每次我在使用qs时，都是用的在当前vue页面添加import qs from 'qs'这种方式

关于qs有两种方法：**qs.parse()和qs.stringify()**

这两种方法虽然都是序列化，但是还是有区别的。  
**qs.stringify()是将对象 序列化成URL的形式，**多个对象之间用&拼接（拼接是由底层处理，无需手动操作）

**qs.parse()是将URL解析成对象的形式，或者说，**

将序列化的内容拆分成一个个单一的对象

*  在发送请求前将数据用**qs**模块转化
 *  修改请求头的**Content-Type='application/x-www-form-urlencoded’**

![20191014232650772.png][]

或者

this.$axios.post("/user",this.$qs.stringify(data)).then((response) => {
                console.log(response)
              });

例：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMzIzMjU2_size_16_color_FFFFFF_t_70 1][]![20191024200336958.png][]![20191024200341593.png][]

运行结果：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMzIzMjU2_size_16_color_FFFFFF_t_70 2][]

参考：

[https://blog.csdn.net/u013253924/article/details/81772820][https_blog.csdn.net_u013253924_article_details_81772820]

[https://blog.csdn.net/wupuyi/article/details/80269907][https_blog.csdn.net_wupuyi_article_details_80269907]

[20191014231140408.png]: /images/20210725/0ee115ac6fd14f3e9a8707abc33e48fb.png
[20191014231603115.png]: /images/20210725/06c22cd6642b4575a78637f12ac6d67b.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMzIzMjU2_size_16_color_FFFFFF_t_70]: /images/20210725/215e565cefce42aba1d90b97d423f6d1.png
[20191014231800798.png]: /images/20210725/389d3b3ad2f042869757c68de7026107.png
[20191014232650772.png]: /images/20210725/172e18d7962c41a299b747657192c702.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMzIzMjU2_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/2019102420032999.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMzIzMjU2,size_16,color_FFFFFF,t_70
[20191024200336958.png]: https://img-blog.csdnimg.cn/20191024200336958.png
[20191024200341593.png]: /images/20210725/cb2afa1eb2ef431ca8ad481b9f7e801f.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMzIzMjU2_size_16_color_FFFFFF_t_70 2]: /images/20210725/efbb0485e1fe48ce8ffb07bb4b153eaa.png
[https_blog.csdn.net_u013253924_article_details_81772820]: https://blog.csdn.net/u013253924/article/details/81772820
[https_blog.csdn.net_wupuyi_article_details_80269907]: https://blog.csdn.net/wupuyi/article/details/80269907