Springboot开发 -- @RequestBody 接收参数的实例

Spring MVC @RequestBody 实现前后端数据交互

以下是一个使用 jQuery 的 $.ajax 方法发送 POST 请求到后端，后端使用 Spring MVC 的 @RequestBody 注解接收 JSON 参数的示例。

一、前端代码实现

// 假设你已经有了要发送的密码数据  
var passwordData = {  
    oldPwd: 'oldPassword',  
    newPwd: 'newPassword'  
};  
  
// 使用 $.ajax 发送 POST 请求  
$.ajax({  
    url: 'user/changePwd', // 后端接收请求的 URL  
    type: 'POST', // 请求类型  
    contentType: 'application/json; charset=utf-8', // 发送的数据类型  
    dataType: 'json', // 期望从服务器返回的数据类型  
    data: JSON.stringify(passwordData), // 将对象转换为 JSON 字符串  
    success: function(response) {  
        // 请求成功时的处理逻辑  
        if (response.status === 1) {  
            // 密码修改成功  
            alert('密码修改成功！请重新登录！');  
            // 这里可以添加重定向或登出逻辑  
        } else {  
            // 密码修改失败  
            alert('密码修改失败：' + response.msg);  
            // 这里可以添加错误处理逻辑  
        }  
    },  
    error: function(jqXHR, textStatus, errorThrown) {  
        // 请求失败时的处理逻辑  
        alert('发生错误：' + textStatus + ', ' + errorThrown);  
    }  
});

二、后端代码 (Spring MVC)

• 在后端，我们使用Spring MVC来接收前端发送的POST请求。
• 首先，我们定义一个DTO（Data Transfer Object）类来接收前端发送的JSON数据。
• 然后，我们创建一个Controller类，并使用@RestController和@PostMapping注解来映射前端发送的POST请求。
• 在请求处理方法中，我们使用@RequestBody注解来自动将前端发送的JSON数据转换为DTO对象。
• 最后，我们编写处理逻辑，并返回一个包含状态码和消息的JSON响应给前端。

import org.springframework.web.bind.annotation.PostMapping;  
import org.springframework.web.bind.annotation.RequestBody;  
import org.springframework.web.bind.annotation.RestController;  
  
// 假设的 DTO (Data Transfer Object) 类  
public class PasswordChangeDTO {  
    private String oldPwd;  
    private String newPwd;  
  
    // 必须要有 getter 和 setter 方法  
    // ... getter 和 setter 方法 ...  
  
    // toString 方法可以方便调试时查看对象内容  
    @Override  
    public String toString() {  
        return "PasswordChangeDTO{" +  
                "oldPwd='" + oldPwd + '\'' +  
                ", newPwd='" + newPwd + '\'' +  
                '}';  
    }  
}  
  
@RestController  
public class UserController {  
  
    @PostMapping("/user/changePwd")  
    public Map<String, Object> changePassword(@RequestBody PasswordChangeDTO passwordChangeDTO) {  
        // 这里是密码修改的逻辑  
        // passwordChangeDTO 中包含了从前端发送过来的 oldPwd 和 newPwd  
  
        // 假设密码修改成功  
        Map<String, Object> result = new HashMap<>();  
        result.put("status", 1);  
        result.put("msg", "密码修改成功！");  
  
        // 如果密码修改失败，可以返回不同的状态码和消息  
  
        return result;  
    }  
}

三、contentType/dataType/data 参数使用总结

在这个例子中，前端使用 $.ajax 发送了一个包含 JSON 数据的 POST 请求到 /user/changePwd。后端使用 Spring MVC 的 @RestController 和 @PostMapping 注解来映射这个请求，并使用 @RequestBody 来自动将 JSON 数据转换为 PasswordChangeDTO 对象。后端处理完请求后，返回一个包含状态码和消息的 JSON 响应给前端。前端在 success 回调中处理这个响应。

在 Ajax 数据传输 JSON 格式数据 参数时，要修改 contentType 和 dataType 如下：

• contentType: ‘application/json; charset=utf-8’, // 发送的数据类型
• dataType: ‘json’, // 期望从服务器返回的数据类型
• data: JSON.stringify(passwordData), // 将对象转换为 JSON 字符串

在jQuery的$.ajax请求中，contentType、dataType和data这三个参数扮演着不同的角色，用于定义请求的各个方面。以下是这三个参数在发送Ajax请求时的使用总结：

1. contentType

• contentType参数用于设置发送到服务器的数据的MIME类型。这通常与data参数一起使用，特别是当你要发送JSON数据到服务器时。

• 用途：告诉服务器请求体的内容类型，以便服务器能够正确地解析数据。

• 常见值：

‘application/x-www-form-urlencoded;charset=UTF-8’：#这是默认的MIME类型，用于发送简单的表单数据。
‘application/json;charset=utf-8’：当你发送JSON数据到服务器时，应该使用这个MIME类型。

• 示例：当发送JSON数据时，你需要设置contentType为’application/json; charset=utf-8’，并使用JSON.stringify()将JavaScript对象转换为JSON字符串。

2. dataType

• dataType参数用于指定你期望从服务器返回的数据类型。这会影响jQuery如何处理响应数据。

• 用途：告诉jQuery如何处理服务器返回的数据。

• 常见值：

‘xml’：期望返回XML数据。
‘html’：期望返回HTML内容。
‘json’：期望返回JSON数据。
‘text’：期望返回纯文本。
‘script’：期望返回JavaScript代码，并会执行它。

• 示例：如果你期望服务器返回JSON数据，你应该设置dataType为’json’。这样，jQuery会自动将响应体解析为JavaScript对象，并可以在success回调函数中直接使用它。

3. data

• data参数用于发送要提交给服务器的数据。这可以是简单的键值对，也可以是复杂的JavaScript对象或数组。

• 用途：定义要发送到服务器的数据。

• 格式：

键值对：{ key1: ‘value1’, key2: ‘value2’ }
数组：[ ‘value1’, ‘value2’ ]

• 当发送JSON数据时，需要使用JSON.stringify()将JavaScript对象转换为JSON字符串。
• 示例：
  如果你要发送一个包含用户信息的对象到服务器，你可以这样做：data: { username: ‘JohnDoe’, email: ‘johndoe@example.com’ }。
  如果要发送JSON数据，则需要先转换为字符串：data: JSON.stringify({ username: ‘JohnDoe’, email: ‘johndoe@example.com’ })，并设置contentType为’application/json; charset=utf-8’。

4. 总结

• contentType定义了发送到服务器的数据的MIME类型，特别是当发送JSON数据时。
• dataType指定了期望从服务器返回的数据类型，并影响jQuery如何处理响应数据。
• data包含了要发送到服务器的数据，可以是简单的键值对、数组或JSON字符串。

通过正确设置这些参数，你可以确保Ajax请求按照预期的方式发送和接收数据。