解决POST表单提交报错 Content type 'application/x-www-form-urlencoded;charset=UTF-8' not supported
百度发现 application/x-www-form-urlencoded;charset=UTF-8 是以键值对拼接的形式,即前端传过来的是键值对形式
页面代码:
<script>
import teacher from '@/api/teacher'
export default{
/*
data:{
}, //和下边的意义相同,用下边的data()的原因我估计是因为其他的也都是用的括号(),所以为了保持一致,也用括号了
*/
data(){ //定义变量和初始值
return{
list:null, //查询当前页数据集合
page:1, //当前页
limit:3, //每页记录数
teacherQuery: null, //条件封装对象,此处必须使用json格式{},不能指定null
//如果不使用的话后端会出现
//Content type 'application/x-www-form-urlencoded;charset=UTF-8' not supported
total:0 //总记录数
}
},
created(){//渲染前执行,一般用来获取信息,然后填充页面,一般调用methods里边的方法
this.getTeacherList()
},
methods:{ //编写具体的方法,调用api中的方法
//讲师列表
getTeacherList(){
//发送ajax请求
teacher.getTeacherList(this.page,this.limit,this.teacherQuery)
.then(rs => {//请求成功
console.log(rs)
})
.catch(err => {//请求失败
console.log(err)
})
}
}
}
</script>
js代码:底层调用的vue的axios发送的ajax请求
import request from '@/utils/request'
export default {
getTeacherList(page,limit,teacherQuery){
return request({
url: `xxxxxxxxxxx`, //接口路径
method: 'post', //提交方式
data: teacherQuery //json结构参数{"":"","":""},在页面中调用的时候传的是null,导致出现问题
})
}
}
解决方法①:未测试,应该可以
@PostMapping("save")
public Result save(@RequestBody User user) {
}
//修改后的代码示例:
@PostMapping("save")
public Result save(@RequestParam Map<String, Object> params) {
}
//将原本的接收形式@RequestBody改成@RequestParam,同时用Map来接收参数。
解决方法②:本人使用
既然是json结构参数,那么将teacherQuery转换成json不就行了,把teacherQuery括起来就可以了,即在页面代码初始值那将teacherQuery的初始值null改为{}即可
<script>
import teacher from '@/api/teacher'
export default{
/*
data:{
}, //和下边的意义相同,用下边的data()的原因我估计是因为其他的也都是用的括号(),所以为了保持一致,也用括号了
*/
data(){ //定义变量和初始值
return{
list:null, //查询当前页数据集合
page:1, //当前页
limit:3, //每页记录数
teacherQuery: {}, //条件封装对象,此处必须使用json格式{},不能指定null
//如果不使用的话后端会出现
//Content type 'application/x-www-form-urlencoded;charset=UTF-8' not supported
total:0 //总记录数
}
},