解决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             //总记录数
    }
  },

 

posted @ 2023-11-23 18:30  Mrzxs  阅读(1506)  评论(0编辑  收藏  举报