SpringBoot前后端接口对接工作时，经常遇到请求500，400等问题，马虎大意经常导致时间浪费，为此总结了4个常见的复杂请求类型，以此为戒。
开始 1.实体嵌套List提交
例子：提交一个老师的实体Teacher，老师管理着不同的学生，还要传入学生实体List
❌常见问题：提交异常,会报400错误
✔️正确前端代码
✔️正确后台接收
@PostMapping("/f1")
@ResponseBody
public String f1(@RequestBody Teacher teacher){
return teacher.toString();
}
2.普通文件上传
例子：普通input 文件上传通过onchange事件进行数据组装后，提交后台
❌常见问题：提交后,后台接收到的MultipartFile为空
✔️正确前端代码
✔️正确后台接收
@PostMapping("/f2")
@ResponseBody
public String f2(@RequestParam("file") MultipartFile file) {
if (file.isEmpty()) {
return "上传失败，请选择文件";
}
String fileName = file.getOriginalFilename();
return fileName;
}
3.List提交
例子：提交时，传给后台一个List
❌常见问题：提交异常,会报400错误
✔️正确前端代码
✔️正确后台接收
@PostMapping("/f3")
@ResponseBody
public String f3(@RequestBody List teachers) {
return teachers.toString();
}
4.数组Array提交
例子：提交时，传给后台一个Array
❌常见问题：提交异常,会报500错误
✔️正确前端代码
✔️正确后台接收
@PostMapping("/f4")
@ResponseBody
public int[] f4(@RequestParam(value = "array[]")int[] array) {
return array;
}
可视化代码 前端
请求列表
SpringBoot常见出错请求
No
类型
描述
常见问题
参数Data
请求代码
后端代码
操作
f1
实体嵌套List提交
适用于请求时,一个实体嵌套这一个list。
举例:提交一个老师的实体Teacher，老师管理着不同的学生，还要传入学生实体List <Student">>
提交异常,会报400错误
{
"name": "张老师",
"age": "40",
"students": [
{
"name": "王小明",
"age": "15"
},
{
"name": "李小红",
"age": "15"
}
]
}
function f1(){
// 关键逻辑，需要转化成JSON字符串
let data = JSON.stringify(teacher)
$.ajax({
type : 'post',
url : '/f1',
data: data,
contentType:'application/json',
success : function(resData) {
console.log("f1调用成功" + resData)
alert("f1调用成功" + resData);
},
});
}
@PostMapping("/f1")
@ResponseBody
public String f1(@RequestBody Teacher teacher){
return teacher.toString();
}
f2
文件上传
适用于原生文件上传,onchange后数据组装
提交时后台接收的MultipartFile为空
file: (binary)
function f2(){
let file = event.target.files[0];
let formData = new FormData();
formData.append('file', file);
$.ajax({
url: '/f2',
type: 'post',
contentType: false, // ContentType设置成false
processdata: false, // 不需要让浏览器对FormData进行转换
data: formData
}).done(function (resData) {
console.log("f2调用成功:" + resData)
alert("f2调用成功：" + resData)
})
}
@PostMapping("/f2")
@ResponseBody
public String f2(@RequestParam("file") MultipartFile file) {
if (file.isEmpty()) {
return "上传失败，请选择文件";
}
String fileName = file.getOriginalFilename();
return fileName;
}
f3
上传List
适用于请求时,直接传一个List实体。
提交异常,会报400错误
[{
name: "张老师",
age: "40"
},{
name: "李老师",
age: "35"
}]
function f3(){
// 关键逻辑，需要转化成JSON字符串
let data = JSON.stringify(teachers)
$.ajax({
type : 'post',
url : '/f3',
data: data,
contentType:'application/json',
success : function(resData) {
console.log("f3调用成功" + resData)
alert("f3调用成功" + resData);
},
});
}
@PostMapping("/f3")
@ResponseBody
public String f3(@RequestBody List<Teacher">> teachers) {
return teachers.toString();
}
f4
上传数组Array
适用于请求时,直接传一个数组。
提交异常,会报500错误
[1,2,3,4]
function f4(){
$.ajax({
type : 'post',
url : '/f4',
data: {
array:array
},
dataType: 'json',
success : function(resData) {
console.log("f4调用成功" + resData)
alert("f4调用成功" + resData);
},
});
}
@PostMapping("/f4")
@ResponseBody
public int[] f4(@RequestParam(value = "array[]")int[] array) {
return array;
}
后端
package net.javadog.requestdemo.controller;
import net.javadog.requestdemo.entity.Teacher;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.*;
import org.springframework.web.multipart.MultipartFile;
import java.io.File;
import java.io.IOException;
import java.util.List;
@Controller
public class RequestController {
@GetMapping("/request")
public String request(){
return "request/index";
}
@PostMapping("/f1")
@ResponseBody
public String f1(@RequestBody Teacher teacher){
return teacher.toString();
}
@PostMapping("/f2")
@ResponseBody
public String f2(@RequestParam("file") MultipartFile file) {
if (file.isEmpty()) {
return "上传失败，请选择文件";
}
String fileName = file.getOriginalFilename();
return fileName;
}
@PostMapping("/f3")
@ResponseBody
public String f3(@RequestBody List teachers) {
return teachers.toString();
}
@PostMapping("/f4")
@ResponseBody
public int[] f4(@RequestParam(value = "array[]")int[] array) {
return array;
}
}
