表单和POST提交数据序列化，GET不需要序列化

墨蓝 2023-06-27 15:58 11阅读 0赞

## Submit提交表单数据序列化 ##

1.  get是将未加密的明文数据追加到url后面提交，post是将未加密的明文数据封装到请求体。所以说这两种方式虽然一个是在url可见一个不可见，但严格意义上都是不安全的，想要安全只能使用https。无论是submit还是ajax都是这样的。
2.  submit提交的数据属于默认提价方式，所以submit的get和post都是经过序列化后的可以被直接识别，并且序列化后的格式为中间加&的格式(注意这并不是序列化后的唯一标志，序列化的功能并不只如此)，并且都是明文的，仅区别于参数的位置不同，然而这个位置还是可以改变的。
3.  序列化后的数据能够被后端直接识别。把表单中所有的键值对的数据变成后台能够识别的键值对方式。没有序列过后的数据是不能识别的，有重复的或者不合法的不合理的数据。所以必须序列后才能提交数据。
4.  直接把数据跟在url后面的数据是受到url长度限制的。另外get提交方式将数据封装在url后面post提交数据封装在请求体中，这个原则并不是一成不变的，可以后面设置改变的。

## ajax提交时的序列化 ##

1.  ajax提交表单中的数据默认是没有序列化的所以要序列化(默认get和post都没有序列化)。序列化分为两种方式。分别是serialize()和serializeArray() 。后台只能识别&分隔类型的数据。
2.  serialize()序列化为中间加&的方式。序列化并不是只在中间加个&就可以了，还有进行数据整理等功能。这种序列化后的格式就是和submit提交的同一种方式，可以直接接收了。
3.  serializeArray() <font color=\#FF0000>**序列化成json的格式**</font>。这种序列化后的数据要在接收方加上**@Requestbody**之后变成&连接的方式才能接收。

# **[post提交方式为什么要序列化，而Get提交方式就不用？序列化做了什么？][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")
            });
          }

[post_Get]: https://www.cnblogs.com/andyZhang0511/p/12098562.html