前言

回顾过往所做的项目，梳理并记录一些零散的知识点

目录

• 前言
• 一、JSON数据格式
• • 1.1 JSON是什么
  • 1.2 JSON常用的两个数据格式
• 二、前端->后端传递数据的序列化问题
• • 2.1 POST请求方式，需要将数据序列化
  • 2.2 GET请求方式，不需要进行序列化
  • 2.3 From表单形式提交，不需要进行序列化
• 三、前端->后端传递数据的碎碎念
• • 1. this.$axios
  • 2. Content-type
  • 3. JSON.stringify 与 qs.stringify
  • 4. axios、Content-type、JSON/qs.stringify
• 四、JSON.parse(JSON.stringify()) 实现对对象的深拷贝
• 五、axios与JQuery的区别？

提示：以下是本篇文章正文内容，下面案例可供参考

一、JSON数据格式

1.1 JSON是什么

是基于 JavaScript（Web 的编程语言，用于写前端的方法， 控制网页的行为） 的一个子集，是一种开放的、轻量级的数据交换格式，采用独立于编程语言的文本格式来存储和表示数据，易于程序员阅读与编写，同时也易于计算机解析和生成，通常用于在 Web 客户端（浏览器）与 Web 服务器端之间传递数据。

1.2 JSON常用的两个数据格式

// JOSN数组(成员既可以是对象，也可以是字符串)
userInfo:[{"age":"12"},"Zhao","180cm",],
// JSON对象（属性值既可以是字符串，也可以是数组）
UserInfo:{"Name":"zzz","Other":["180cm","80kg","2001"],"age":"22",
},

二、前端->后端传递数据的序列化问题

前言 ：后端服务器可以识别的数据格式是序列化后的格式

2.1 POST请求方式，需要将数据序列化

需要序列化的原因：使用POST请求，前端发送的数据会以原始数据格式（JOSN格式）存储在body之中，然后直接发送给后端，后端无法识别这些数据。所以前端要将参数序列化后再POST给后端。

2.2 GET请求方式，不需要进行序列化

不需要序列化的原因：GET请求方式提交数据时，参数会直接附加到url后边，即http://xxxx.xxx?a=1&b=2&c=3（GET请求会自动将传递的数据序列化）。

2.3 From表单形式提交，不需要进行序列化

不需要序列化的原因：如果数据是通过表单Form提交，不管是get还是post,浏览器都会自动进行序列化，无需前端再做处理。

三、前端->后端传递数据的碎碎念

1. this.$axios

axios是什么？：简单理解，axios是封装好的、基于promise的从前端向后端发送请求的方法。
axios与ajax的区别与联系：axios是通过Promise实现对ajax技术（多种技术的组合，用于快速的创建动态页面，能够实现无刷新更新数据）的一种封装，axios有的ajax都有，ajax有的axios不一定有。

详细内容参考：ajax和axios区别及优缺点

2. Content-type

Content-type是什么？：Content-Type表示内容类型和字符编码。请求头中的content-type，就是B端发给S端的数据类型描述 ，即请求体中的数据类型。即告诉服务器端，我给你传的数据是某种类型的。

常见的四种数据类型：

1. application/json
   描述：请求体中的数据会以json字符串的形式发送到后端
   应用场景：①参数类型：JSON字符串格式；② 用在发送ajax（axios是ajax的衍生）请求时；③前后端分离开发场景中使用最多

2. application/x-www-form-urlencoded
   描述：请求体中的数据会以普通表单形式（键值对）发送到后端
   应用场景：① 参数类型：表单（键值对）；② 采用POST请求方式

3. multipart/form-data
   描述：它会将请求体的数据处理为一条消息，以标签为单元，用分隔符分开。既可以上传键值对，也可以上传文件
   应用场景：① 参数类型：文件/键值对；② 采用POST请求方式

4. text/xml
   描述：这种格式（XML格式）是比较早的格式。现在用的比较少了，因为XML格式的数据被json的数据大，复杂。所以，基本上被淘汰了。

参考文章：HTTP请求响应过程中的Content-type你真的清楚吗

3. JSON.stringify 与 qs.stringify

区别与联系：JSON.stringify与qs.stringify()功能都是将JSON数据格式序列化为字符串，但是序列化的方式不同，应用场景也有所区别。

• JSON.stringify将JSON对象序列化为JSON字符串形式；JSON.parse转化回去；
• qs.stringify将JOSN对象序列化为URL形式，用&拼接；qs.parse转化回去；

JSON.stringify与qs.stringify()序列化后的结果对比如下：

var a = {name:'hehe',age:10};JSON.stringify(a)
// '{"name":"hehe","age":10}'qs.stringify(a)
// 'name=hehe&age=10'

4. axios、Content-type、JSON/qs.stringify

三者联系：前端使用axios向后端发送POST请求时，通过设置Content-type来标识传递的参数是哪种数据类型，不同的数据类型会采用不同的序列化方法。

axios 可配置的三种 Content-Type及参数处理方案
① Content-Type: application/json<---->JSON.stringify
配置方法：无需配置，这种是axios默认的请求数据类型，
参数处理：通过JSON.stringify将参数序列化JSON字符串再传递

② Content-Type: application/x-www-form-urlencoded<---->qs.stringify
配置方法：需要将axios请求头中的content-type配置为application/x-www-form-urlencoded类型

// 第一种方式
axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded'; 
// 第二种方式
{headers:{'Content-Type':'application/x-www-form-urlencoded'}}

参数处理：通过qs.stringify将参数序列化url字符串再传递

import Qs from 'qs'
let data = {"username": "cc","psd": "123456"
}axios({headers: {'Content-Type': 'application/x-www-form-urlencoded'},method: 'post',url: '/api/lockServer/search',data: Qs.stringify(data)
})

③ Content-Type: multipart/form-data<---->URLSearchParams
配置方法：无需配置，采用特殊参数传递数据
参数处理：用 URLSearchParams 传递参数

let param = new URLSearchParams()
param.append('username', 'admin')
param.append('pwd', 'admin')
axios({method: 'post',url: '/api/lockServer/search',data: param
})

四、JSON.parse(JSON.stringify()) 实现对对象的深拷贝

为了避免出现“ 某一数据变动后，其之前赋值过的变量也出现变动 ”的连坐现象，一般采用深拷贝，具体情况参考原博客：JSON.parse(JSON.stringify()) 实现对对象的深拷贝

五、axios与JQuery的区别？

• axios的’Content-Type’默认采用的是application/json，即axios默认的需要用JSON.stringify进行序列化参数
• JQuery的’Content-Type’默认采用的是application/x-www-form-urlencoded，即JQuery默认的需要用qs.stringify进行序列化参数

参考连接：浅谈axios与jQuery不同