一.后端如何正确返回JSON?
1:使用框架如Spring boot
请看这个代码:
@RestController
public class MyController {
@GetMapping("/example")
public Map<String, Object> example() {
Map<String, Object> response = new HashMap<>();
response.put("ok", 1);
return response;
}
}
首先,我们先要了解@RestController
@RestControler会自动帮我们将return的数据转为JSON的格式传给前端,但是有个前提return的返回类型可以是集合/对象,例如Map,list,以及创建的类,但是不能是字符串类型(String)。
那么字符串类型的返回如何编译为JSON呢,请看下面代码:
@GetMapping("/text")
public String getText() {
return "{\"ok\":1}"; // 前端收到的是字符串,Content-Type: text/plain
}
我们可以看到此代码的返回值类型为String类型,那么前端收到的Content-Type:text/plain,就可能导致前端在将json转为对象是发生错误,那么如何修改呢?
@GetMapping(value = "/json", produces = "application/json")
public String getJson() {
return "{\"ok\":1}"; // Content-Type: application/json
}
只需要在@GetMapping中加上Content-Type类型即可,那么后端识别的就是JSON格式。
2.前端 AJAX 代码的作用
$.ajax({
url: "/Message/publish",
type: "POST",
contentType: "application/json", // 关键设置 1
data: JSON.stringify({ // 关键设置 2
from: from,
to: to,
say: say
}),
// ...
});
-
contentType: "application/json"
明确告诉后端:“我发送的是 JSON 格式的请求体”。
设置 HTTP 请求头的Content-Type
为application/json
,确保后端能正确识别请求格式。 -
data: JSON.stringify(...)
将 JavaScript 对象转换为 JSON 字符串。
将前端输入的数据(from
,to
,say
)包装成符合 JSON 格式的字符串,作为 HTTP 请求体发送。
我们通过以上代码和解析可以了解到:
通过
contentType: "application/json" data: JSON.stringify
明确告知后段我发送的是JSON格式。
3.@RequestBody
的作用
public String publish(@RequestBody Message message) { ... }
将前端发送的 JSON 请求体(即 data: JSON.stringify(...)
生成的字符串)自动反序列化为 Message
对象。
相当于:
// 伪代码:Spring 底层处理
ObjectMapper mapper = new ObjectMapper(); // Jackson 工具
Message message = mapper.readValue(requestBody, Message.class);
关键问题解答
Q1:前端 contentType
和 data
是处理发送还是接收的数据?
-
发送的数据:
contentType
和data
用于定义 请求体格式,将前端输入转为 JSON 发送给后端。
Q2:后端 @RequestBody
的作用是什么?
-
将 JSON 请求体转为对象:前端发送的 JSON 字符串会被自动反序列化为
Message
对象。
Q3:@RestController
是否影响返回值类型?
-
是:如果返回对象或集合,自动转为 JSON;如果返回
String
,需额外设置produces
才能保证 JSON 格式。
4.代码对比:正确 vs 错误写法
@PostMapping("/publish")
public Map<String, Integer> publish(@RequestBody Message message) {
Map<String, Integer> response = new HashMap<>();
response.put("ok", 1);
return response; // 自动转为 JSON,无需手动拼接
}
@RequestMapping(value = "/publish", produces = "application/json")
public String publish(@RequestBody Message message) {
return "{\"ok\":1}"; // 手动拼接 JSON,存在维护风险
}
5.结论
4. 最终结论(返回值不是集合,类,Map)
场景 | 后端代码 | 前端处理方式 |
---|---|---|
正确设置 produces | produces = "application/json" | 自动解析为对象 |
未设置 produces | 无 produces (默认 text/plain ) | 需手动 JSON.parse |