Submit提交表单数据序列化
-
get是将未加密的明文数据追加到url后面提交，post是将未加密的明文数据封装到请求体。所以说这两种方式虽然一个是在url可见一个不可见，但严格意义上都是不安全的，想要安全只能使用https。无论是submit还是ajax都是这样的。
-
submit提交的数据属于默认提价方式，所以submit的get和post都是经过序列化后的可以被直接识别，并且序列化后的格式为中间加&的格式(注意这并不是序列化后的唯一标志，序列化的功能并不只如此)，并且都是明文的，仅区别于参数的位置不同，然而这个位置还是可以改变的。
-
序列化后的数据能够被后端直接识别。把表单中所有的键值对的数据变成后台能够识别的键值对方式。没有序列过后的数据是不能识别的，有重复的或者不合法的不合理的数据。所以必须序列后才能提交数据。
-
直接把数据跟在url后面的数据是受到url长度限制的。另外get提交方式将数据封装在url后面post提交数据封装在请求体中，这个原则并不是一成不变的，可以后面设置改变的。
ajax提交时的序列化
-
ajax提交表单中的数据默认是没有序列化的所以要序列化(默认get和post都没有序列化)。序列化分为两种方式。分别是serialize()和serializeArray() 。后台只能识别&分隔类型的数据。
-
serialize()序列化为中间加&的方式。序列化并不是只在中间加个&就可以了，还有进行数据整理等功能。这种序列化后的格式就是和submit提交的同一种方式，可以直接接收了。
-
serializeArray() <font color=#FF0000>序列化成json的格式</font>。这种序列化后的数据要在接收方加上@Requestbody之后变成&连接的方式才能接收。
post提交方式为什么要序列化，而Get提交方式就不用？序列化做了什么？
这是因为<font color=red>后台能够直接处理的数据格式，是一种经过序列化的键值对数据</font>，比如前端要向后台提交三个参数，分别是a=1，b=2，c=3，那么后台接收到的数据就应该是a=1&b=2&c=3（可以看到其实就是每个“键值对”之间用&连接）。当我们用get方式提交数据时，参数是直接附加到url后面的，即
xxx.xxx这是域名此略.xxx?a=1&b=2&c=3 可以看到?后面的正是后台程序能够直接处理的数据格式，所以get方式提交数据的话，就不需要再对参数进行序列化处理了，直接提交即可。 而当我们用post方式提交时，通常我们提交的数据本身就是一个json对象，比如说像这样的： var data = {a:1, b:2, c:3}; 而提交时数据是直接以原始格式存储在body中而不是以键值对的方式附加到url中的，所以后台程序是无法直接识别的，这时候就需要在提交前先把data转换为 a=1&b=2&c=3 的格式再提交，这就是序列化。 当然，如果数据是通过表单提交的，那么不管是post方式还是get，浏览器会自动进行序列化，无需前端js再做任何处理。
案例:
不序列化的
请求的url链接：http://localhost:8080/#/depts/delete/1
async removeCateById(id) {
const {data:res} = await this.$http.delete(
`depts/delete/${id}`
)
if(res.state !==1) {
return this.$message.error('删除部门失败！')
}
this.getCateList()
this.$message.success('删除部门成功！')
}序列化的
请求的url链接：http://localhost:8080/#/hr/doFindHrByUsername?username=admin&password=123456
login() {
this.$refs.loginFormRef.validate(async valid=>{
if(!valid) return;
//返回值是 promise用 await 和async 异步
//解构
let params= { username:this.loginForm.username,
password:this.loginForm.password}
const {data:res} =await this.$http.post("/hr/doFindHrByUsername",this.$qs.stringify(params)
);
if(res.state !==1) return this.$message.error('登录失败，用户名或密码错误')
this.$message.success('登录成功'+res)
this.$store.commit('login',res.data)
//console.log(this.$store.state.userInfo)
// 1. 将登录成功之后的 token，保存到客户端的 sessionStorage 中
// 1.1 项目中除了登录之外的其他API接口，必须在登录之后才能访问
// 1.2 token 只应在当前网站打开期间生效，所以将 token 保存在 sessionStorage 中
console.log(res)
//window.sessionStorage.setItem("token",res.data.token);
//2.通过编程式导航跳到后台主页,路由地址是 /home
this.$router.push("/home")
});
}