- application/x-www-form-urlencoded
常用的form表单提交方式, header中Content-Type 被指定为 application/x-www-form-urlencoded； 以key=value&key1=value2的形式提交。
实际的请求形式：
POST http://www.aaa.com HTTP/1.1
Content-Type: application/x-www-form-urlencoded;charset=utf-8
title=test&desc=test
例如： vue axios
axios({
url: '/https://www.runoob.com/try/ajax/json_demo.json',
method: 'post',
data: {
name: 'john',
sex: 'M',
desc:'一个例子'
},
transformRequest: function (data) {
let params = ''
for (let item in data) {
params += encodeURIComponent(item) + '=' + encodeURIComponent(data[item]) + '&'
}
// alert(params)
return params
},
headers: {
'Content-Type': 'application/x-www-form-urlencoded'
}
})
Spring中用@RequestParam来处理Content-Type为application/x-www-form-urlencoded数据。修饰的对象可以是基本数据类型和自定义对象。
- multipart/form-data
表单上传文件时content-type 使用这个。生成了一个 boundary 用于分割不同的字段，为了避免与正文内容重复，boundary 很长很复杂。
实际的请求形式：
POST http://www.example.com HTTP/1.1
Content-Type:multipart/form-data; boundary=----WebKitFormBoundaryrGKCBY7qhFd3TrwA
------WebKitFormBoundaryrGKCBY7qhFd3TrwA
Content-Disposition: form-data; name="text"
title
------WebKitFormBoundaryrGKCBY7qhFd3TrwA
Content-Disposition: form-data; name="file"; filename="chrome.png"
Content-Type: image/png
PNG ... content of chrome.png ...
------WebKitFormBoundaryrGKCBY7qhFd3TrwA--
<html>
<head>
<title></title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="https://cdn.bootcss.com/vue/2.3.4/vue.js"></script>
<script src="https://cdn.bootcss.com/axios/0.16.2/axios.js"></script>
</head>
<body>
<form>
<input type="text" value="" v-model="name" placeholder="请输入用户名">
<input type="text" value="" v-model="age" placeholder="请输入年龄">
<input type="file" @change="getFile($event)">
<button @click="submitForm($event)">提交</button>
</form>
</body>
<script>
window.onload = function () {
Vue.prototype.$http = axios;
new Vue({
el: 'form',
data: {
name: '',
age: '',
file: ''
},
methods: {
getFile(event) {
this.file = event.target.files[0];
console.log(this.file);
},
submitForm(event) {
event.preventDefault();
let formData = new FormData();
formData.append('name', this.name);
formData.append('age', this.age);
formData.append('file', this.file);
let config = {
headers: {
'Content-Type': 'multipart/form-data'
}
}
this.$http.post('/upload', formData, config).then(function (res) {
if (res.status === 2000) {
/*这里做处理*/
}
})
}
}
})
}
</script>
</html>
spring 可以使用@RequestPart处理接收到的文件。
/**
* 单文件上传
* @param file
* @param bucket
* @return
*/
@RequestMapping("uploadFile")
public JsonResult uploadFile(@RequestPart("file") MultipartFile file, @RequestParam String bucket){
String fileUrl = aliossService.uploadFile(file, bucket);
Map<String,String> result = new HashMap<>();
result.put("fileUrl",fileUrl);
return success(result);
}
- application/json
application/json作为请求头，用来告诉服务端消息主体是序列化的JSON字符串。
vue 默认就是使用的content-type: aplication/json
实际发送的请求：
POST http://www.aaa.com HTTP/1.1
Content-Type: application/json;charset=utf-8
{"title":"test","sub":[1,2,3]}
springMVC：
必须用@RequestBody来修饰接收到的post body内的对象。
前端：
vue axios：
axios({
method: 'post',
url: '/saveUser',
data: {
firstName: 'Fred',
lastName: 'Flintstone'
}
});
接受：
@RequestMapping(value = "/saveUser", method = RequestMethod.POST, consumes = "application/json; charset=utf-8")
public ResponseEntity<String> saveUser(@RequestBody User user){}
vue axios：
axios({
method: 'get',
url: '/user/123',
data: {
}
});
获取：
@RequestMapping(value = "/user/{userId}", method = RequestMethod.GET, produces="application/json")
@ResponseBody
public User getUser(@PathVariable String UserId, Model model) {}
4.text/xml
一种使用 HTTP 作为传输协议，XML 作为编码方式的远程调用规范。
主要是使用
网友评论