SpringBoot前后端Json数据交互的全过程记录

前言

本文主要介绍SpringBoot前后端Json数据交互的全过程，包括前端发送Json数据、后端接收Json数据、后端发送Json数据、前端接收Json数据四个方面。

前端发送Json数据

前端发送Json数据主要通过Ajax来实现。以下是一个简单的Ajax请求示例：

$.ajax({
    url: "/api/user",
    type: "POST",
    data: JSON.stringify({
        name: "Alice",
        age: 18
    }),
    contentType: "application/json; charset=utf-8",
    dataType: "json",
    success: function (data) {
        console.log(data);
    },
    error: function (xhr, status, errorThrown) {
        console.log(xhr);
        console.log(status);
        console.log(errorThrown);
    },
    complete: function (xhr, status) {
        console.log(xhr);
        console.log(status);
    }
});

后端接收Json数据

后端接收Json数据需要使用@RequestBody注解将请求体自动转换成Java对象。以下是一个简单的SpringBoot Controller示例：

@PostMapping("/api/user")
@ResponseBody
public User addUser(@RequestBody User user) {
    // 处理user对象
    return user;
}

后端发送Json数据

后端发送Json数据需要在Controller方法上添加@ResponseBody注解，将返回对象转换成Json格式。以下是一个简单的SpringBoot Controller示例：

@GetMapping("/api/user/{id}")
@ResponseBody
public User getUserById(@PathVariable Long id) {
    User user = userService.getUserById(id);
    // 返回User对象，自动转换成Json格式
    return user;
}

前端接收Json数据

前端接收Json数据可以直接将dataType设为"json"，在success回调函数中处理返回的Json对象。以下是一个简单的Ajax请求示例：

$.ajax({
    url: "/api/user/1",
    type: "GET",
    dataType: "json",
    success: function (data) {
        console.log(data.name);
        console.log(data.age);
    },
    error: function (xhr, status, errorThrown) {
        console.log(xhr);
        console.log(status);
        console.log(errorThrown);
    },
    complete: function (xhr, status) {
        console.log(xhr);
        console.log(status);
    }
});

示例

示例一: 添加用户

前端发送Json数据，后端接收Json数据，并返回Json数据。

$.ajax({
    url: "/api/user",
    type: "POST",
    data: JSON.stringify({
        name: "Alice",
        age: 18
    }),
    contentType: "application/json; charset=utf-8",
    dataType: "json",
    success: function (data) {
        console.log(data);
    },
    error: function (xhr, status, errorThrown) {
        console.log(xhr);
        console.log(status);
        console.log(errorThrown);
    },
    complete: function (xhr, status) {
        console.log(xhr);
        console.log(status);
    }
});

@PostMapping("/api/user")
@ResponseBody
public User addUser(@RequestBody User user) {
    // 处理user对象
    return user;
}

示例二: 获取用户信息

前端发送请求，后端接收请求，并返回Json数据。

$.ajax({
    url: "/api/user/1",
    type: "GET",
    dataType: "json",
    success: function (data) {
        console.log(data);
    },
    error: function (xhr, status, errorThrown) {
        console.log(xhr);
        console.log(status);
        console.log(errorThrown);
    },
    complete: function (xhr, status) {
        console.log(xhr);
        console.log(status);
    }
});

@GetMapping("/api/user/{id}")
@ResponseBody
public User getUserById(@PathVariable Long id) {
    User user = userService.getUserById(id);
    return user;
}

结语

以上就是本文介绍的SpringBoot前后端Json数据交互全过程。其中，前端发送Json数据需要使用Ajax请求，后端接收和发送Json数据需要用到@RequestBody和@ResponseBody注解。