Ajax前后端传递数据的方式

一、Get请求和Post请求的区别

        做前后端分离项目的小伙伴们应该知道，前后端的交互靠的是Ajax从前端向后端请求提交各种数据，从而完成各种功能，而且请求的方式大致可以分为Get请求和Post请求两种，那么这两种请求有什么区别呢？

        1.Get请求和Post请求的适用情景不一样，Get请求一般适用的情景是前端向后端请求数据，Get请求会将收集到的参数数据添加到请求指定的URL中，且在URL中可见参数数据。

//如下
https://mp.youkuaiyun.com/XXXXXX/creation/XXXX?spm=1001.2101.3001.4503
//spm=1001.2101.3001.4503就是一个添加在URL中的参数
//这样的参数在进行路由地址跳转的时候是可以看见的

所以Get请求传递的数据不应该太长，实际上Get请求传递的数据量不能大于2KB，且安全性较低。Get请求通过Request.QueryString获取到后端服务器数据。

        2.Post请求：Post请求相对于Get请求，他是一种适用于前端向后端传递数据，并对后端产生持久性影响（如进行数据的插入和更新删除）的情景的请求方式。Post请求分为两部分，header和body，即请求头请求体，请求头中可以包含一些请求信息，而请求体中一般是传递的数据。Post请求通过Request.Form获取后端服务器数据。post请求传递的数据量要远远大于Get请求，一般被默认为不受限制。但理论上，IIS4中最大量为80KB，IIS5中为100KB。同时Post请求相对于Get请求较安全。

一、get请求

        1.将参数拼接在地址中，这种方式在进行地址跳转时可以在地址上看到参数的数据内容一般用于不太重要的参数传递，例如分页，分组查询

//前端请求
url: "/order/userPage?page="+page+"&pageSize="+pageSize,
//后端接受
public void userPage(@RequestParam（"page"）Integer page,@RequestParam ("pagesize") Integer pagesize)

        2.将参数拼接在URL中，后台通过占位符接受参数

//前端
url: "/order/userPage" + userPage
//后端接收
public void userPage(@PathVariable（"page"）Integer page)

        3.get请求能不能传递一些对象型数据，这个我确实没有在网上找到材料，但是据说有，有看到的兄弟姐妹欢迎留言共同探讨（ღ( ´･ᴗ･` )比心）

二、Post请求

        1.使用Ajax发送post请求和接受数据时，Ajax会将数据转为JSON字符串，所以如果后台服务器接受请求的方法无法解析JSON字符串那么后台服务器会报错。

        2.Post请求提交表单数据时，如果提交的表单数据在后台中有对应的实体类可以接受那么可以通过一下的方式直接将前端传递到后台的JSON数据转化为实体类

//前端请求
self.$http.post('/Role/changeStatus', 
            {
                enabled: value,
                roleId: role.roleId
              }).then(res=>{})
//后端接收AdminRole adminRole为已知实体类
@PostMapping("/changeStatus")
    private AjaxResult changeStatus(@RequestBody AdminRole adminRole){

        3.如果前端传递的数据时散乱的数据，后台服务器无法用实体类进行接受，那么可以用

JSONObject 对象进行接收，再使用其get方法进行数据的分发。对于前端传递数组，也可以使用这个思路，即将数组在前端转化成JSON字符串，再传递给后端，后端接受JSON字符串之后进行对应的处理

//前端请求
 self.$http.post("/Role/testData", {
            userId:1,
            userName:"张三"
          },{
          headers: {
            'Content-Type': 'application/json'
          }
        })
          .then(res=>{
            console.log("测试成功！")
          })
@PostMapping("testPostData")
    private void testPostData(@RequestBody JSONObject body){
        System.out.println("Post测试传值测试数据展示：");
        System.out.println("test1:"+body.getInteger("userId"));
        System.out.println("test1:"+body.getString("userName"));
//        System.out.println("test2:"+userName);
    }