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请求按照预期的方式发送和接收数据。
