一、问题场景
后端代码:
@RequestMapping("/tranfer/save")
public Result<String> transferSave( String indexs, String userId){
// 逻辑代码..
}
前端以POST
方式调用/tranfer/save
接口时会传两个参数:indexs、userId。
而在transferSave方法体内debug,发现参数获取到的是 null 值。
二、原因
post请求提交数据有四种常见方式:
- application/x-www-form-urlencoded 浏览器的原生
- multipart/form-data 表单上传文件用的这种提交方式
- application/json 这种提交方式的消息主体是一个json字符串
- text/xml 消息主体是XML格式的内容
前端调用接口时,观察请求头,其中数据格式为**content-type: application/json; charset=UTF-8**
所以在服务端进行接收的时候不能直接用多个形参接受。否则服务器会返回400
错误。
三、解决方式
1、(推荐)使用参数的包装类
可以封装一个接收请求参数的类:
@Data
public class Param{
private String indexs;
private String userId;
}
在方法形参处用改类进行接收即可:
@RequestBody 作用在形参列表上,用于将前台发送过来固定格式的数据【xml 格式或者 json等】封装为对应的 JavaBean 对象。
@RequestMapping("/tranfer/save")
public Result<String> transferSave(@RequestBody Param param){
String indexs = param.getIndexs();
// 逻辑代码..
}
2、用流解析json格式传参
@RequestMapping("/tranfer/save")
public Result<String> transferSave(HttpServletRequest req){
String indexs = "";
String userId = "";
try {
BufferedReader br = new BufferedReader(new InputStreamReader(req.getInputStream()));
StringBuffer sb=new StringBuffer();
String s=null;
while((s=br.readLine())!=null){
sb.append(s);
}
JSONObject jsonObject = JSONObject.parseObject(sb.toString());
indexs = jsonObject.getString("name");
userId = jsonObject.getString("age");
} catch (IOException e) {
e.printStackTrace();
}
// 逻辑代码..
}
3、前端发送POST请求时将参数放在url之后
前端调用接口的vue代码:
const getTransterSave = (data) => {
return request({
url: 'xxx/tranfer/save/',
method: 'POST',
data: data // 参数以请求体方式串数
})
}
将其改为:
const getTransterSave = (data) => {
return request({
url: 'xxx/tranfer/save/',
method: 'POST',
params: data // 参数以url拼接的方式串数
})
}