Content-Type前后端交互

目录

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

1.1 普通参数

1.2 二进制流参数

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

---

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

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

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) {
	// 后台接口的相关操作
}