Content-Type前后端交互

前端向后端传输的数据,必须在请求头中说明数据类型,常用的数据类型有2种

1 'Content-Type': 'multipart/form-data'

        需要配置SpringMVC文件上传解析器CommonsMultipartResolver(不推荐)StandardServletMultipartResolver(推荐)

1.1 普通表单参数

        后端形参用@RequestParam注解

        前端示例:

axios.post(this.projectName + '/aaa.do', {
	paramA: '参数1',
	paramB: '参数2',
	paramC: '参数3'
}, {
	headers: {
		'Content-Type': 'multipart/form-data'
	}
}).then(
	response => {
		// 接口响应后的相关操作
	}
)

        后端示例:

@RequestMapping("/aaa.do")
public Result changeSizes(@RequestParam String paramA, @RequestParam String paramB, @RequestParam String paramC) {
	// 后台接口的相关操作
}

1.2 二进制流参数

        前端用responseType: 'blob'说明是传输二进制流文件

        后端形参用@RequestParam注解,同时用org.springframework.web.multipart.MultipartFile类接收

        前端示例:

let formData = new FormData();
formData.append('paramA', '参数1');
formData.append('paramB', '参数2');
axios.post('/bbb.do', formData, {
	headers: {
		'Content-Type': 'multipart/form-data'
	},
	responseType: 'blob'
}).then(
	response => {
		// 接口响应后的相关操作
	}
)

        后端示例:

@RequestMapping("/bbb.do")
public Result uploadPic(@RequestParam("paramA") String paramA, @RequestParam("paramB") MultipartFile paramB, HttpServletResponse response) throws Exception {
    // 后台接口的相关操作
}

2 'Content-Type': 'application/json'

        后台必须@RequestBody注解

        前端示例:

axios.post(this.projectName + '/ccc.do', {
	paramA: '参数1',
	paramB: '参数2',
	paramC: '参数3'
}, {
	headers: {
		'Content-Type': 'application/json'
	}
}).then(
	response => {
		// 接口响应后的相关操作
	}
)

        后端示例:

@RequestMapping("/ccc.do")
public Result updateAlWindow(@RequestBody User user) {
	// 后台接口的相关操作
}
  • 1
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值