前后端请求方式

1. 初衷

自己当年初入码场磕磕碰碰的总结，帮助初入码场的大家少走弯路~~

2. 实体类

1
2
3
4
5
6
@Data
public class User {
    private int id;
    private String name;
    private String password;
}

3. 前后端接收方式

3.1. 前端—ajax

3.1.1 方式1

前端发送：login?name=xxx&password=xxx,由于是post传递所以最终?name=xxx&password=xxx可忽略

1
2
3
4
5
6
7
$.post("login",
       data={
    name:"xxx",
    password:"xxx"  
},function (res) {
    //处理结果 
})

后端接收：

1
2
3
4
5
@ResponseBody
@PostMapping(value = "/login")
public Result login(String name, String password) {
        return Result.success("成功");
}

3.1.2. 方式2

前端发送：login/name/password

1
2
3
4
5
6
window.location.href = "login/"+name+"/"+password;
或
$.get("login/"+name+"/"+password,
      function (res) {
    //处理结果 
})

后端接收：

1
2
3
4
5
@ResponseBody
@GetMapping(value = "/login/{name}/{password}")
public Result login(@PathVariable("name") String name,@PathVariable("password") String password) {
        return Result.success("成功");
}

3.1.3. 方式3

前端发送：/login，参数在请求body里，并且application/json方式前端必须传递的是JSON字符串，后端必须使用@RequestBody接收

1
2
3
4
5
6
7
8
9
10
11
12
13
$.ajax({
    type: "POST",
    url: "login",
    contentType: "application/json; charset=utf-8",
    data: JSON.stringify({
        "name":name,
        "password":password
    }),
    dataType: "json",
    Success:function(res){
        //处理结果 
    }
})

后端接收：

1
2
3
4
5
6
@ResponseBody
@PostMapping(value = "/login")
public Result login(@RequestBody Map map) {
        System.out.println(map.get("name").toString());
        return Result.success("成功");
}

3.1.4. 方式4

引入所需的JSON包依赖

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<!--引入fastjson包-->
<dependency>
    <groupId>com.alibaba</groupId>
    <artifactId>fastjson</artifactId>
    <version>1.2.78</version>
</dependency>

<!--引入jackson包-->
<dependency>
    <groupId>com.fasterxml.jackson.core</groupId>
    <artifactId>jackson-databind</artifactId>
    <version>2.9.3</version>
</dependency>

<!--引入gson包-->
<dependency>
    <groupId>com.google.code.gson</groupId>
    <artifactId>gson</artifactId>
    <version>2.8.2</version>
</dependency>

前端发送(例：批量根据ID更新用户)：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
let userList=[];
for(let i=0;i<2;i++){
    userList.push({
        id:i,
        name:"name",
        password:"password"
    });   
}
$.post({
    url: "login",
    data: {
        userList:JSON.stringify(userList)
    },
    function(res){
        //处理结果 
    }
})

后端接收：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
@ResponseBody
@PostMapping(value = "/login")
public Result login(String userList) {
    //fastjson
    List<User> list = JSON.parseObject(userList, new TypeReference<ArrayList<User>>() {});
    //jackson
    ObjectMapper mapper=new ObjectMapper();
    List<User> list= Arrays.asList(mapper.readValue(userList,User[].class));
    //Gson
    Gson gson =new Gson();
    List<User> list = gson.fromJson(userList, new TypeToken<List<User>>(){}.getType());

    return Result.success("成功");
}

3.1.5. 方式5

前端发送(例：批量根据ID列表删除用户)：

1
2
3
4
5
6
7
8
9
10
11
12
13
let IdArr=[];
IdArr.push(1);
IdArr.push(2);
let idList = IdArr.join(",")
$.post({
    url: "login",
    data: {
        idList:idList
    },
    function(res){
        //处理结果 
    }
})

后端接收：

1
2
3
4
5
6
7
8
9
10
@ResponseBody
@PostMapping(value = "/login")
public Result login(String idList) {
    List<String> list = new ArrayList<>();
    String[] arr = idList.split(",");
    //将string数组装进list中
    Collections.addAll(list, arr);
    System.out.println(list);//list:[1,2]
    return Result.success("成功");
}

3.2. 前端—Form表单

3.2.1. 方式1

前端发送：

1
2
3
4
5
6
7
8
9
10
<!--`th:action="@{/login}"`为thymeleaf模板引擎语法，若无可替换`action="/login"`-->
<form th:action="@{/login}" method="post">
    用户名：<br>
    <input type="text" name="name"><br>
    密码：<br>
    <input type="password" name="password"><br>
    <input type="submit"value="提交">

</form>

后端接收：

1
2
3
4
5
@ResponseBody
@PostMapping(value = "/login")
public Result login(String name, String password) {
        return Result.success("成功");
}