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")
});
}
