在开发中常用的Content-Type有application/x-www-form-urlencoded和
application/json,作为后端开发有必要了解一些前端开发知识,对于这俩种类型前端是如果构造参数的,有必要了解一下前端是如何构造参数的,因为在日常开发中,如果你不清楚的话,跟前端对接时经常你因为你定义某种接收参数类型,而前端传的另外一种类型导致联调时不必要的麻烦!
1.application/x-www-form-urlencoded是常见的web 表单提交方式,参数通常在请求body中以key=value&key=value将键值对的参数用&连接起来方式传递。
除了表单form提交外,使用ajax一般构造参数如下:
1)创建建一个URLSearchParams对象,然后将参数append到这个对象中
const params = new URLSearchParams();
params.append('username', this.username);
params.append('password', this.password)
axios({
method: 'post',
url: 'users/login/',
data: params,
headers:{'Content-Type':"application/x-www-form-urlencoded"}
}).then(res => {
console.log(res.data);
// 将用户token保存到session中
// localStorage.setItem('token', 'res.data.data.body.token');
// _this.$router.push({ path: '/' });
}).catch(error => {
alert('账号或密码错误');
console.log(error);
});
2)qs.stringfy() 将对象序列化成URL的形式
import qs from 'qs';
const data = { name:'mx' , age:'25'}; // 我们传的是 js 对象
const options = {
method: 'POST',
headers: { 'content-type': 'application/x-www-form-urlencoded' },
data: qs.stringify(data), // 用 qs 将js对象转换为字符串 'name=mx&age=25'
url: 'http://www.edward.com'
}; axios(options);
3)jquery通过ajax post提交好像json对象可以直接转换键值对以&连接方式,具体可以自行了解一下,因为目前前端主流开发vue\react。
2.application/json类型,这种就更简单了,参数直接是我们常用的json格式,示例如下:
let params= { name: 'mx', age: '25' }
$.ajax({
type: 'POST',
contentType: 'application/json;charset=utf-8', // 发送的数据类型
dataType: 'json', // 接收的数据类型
url: 'http://www.baidu.com',
data: params,
success: function (res) {
console.log(res.data)
}
})
注:常用的json字符串互转方式:jquery方式:$.parseJSON(string)、主流浏览器方式:JSON.stringfy(formData)、JSON.parse(string)部分浏览器不支持需引入json.js文件、JavaScript支持方式:eval("(" + string + ")")
3.针对这俩种方式,java后端如何接受方式,可参考如下俩篇文章。
POST、GET、@RequestBody和@RequestParam区别_Hello World-CSDN博客_@requestparam
o(* ̄︶ ̄*)o日积月累,每天进步一点点