在开发中常用的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

解决Spring/SpringBoot @RequestParam注解无法读取application/json格式数据。_小菜鸡cccc的
博客-CSDN博客_requestparam springboot
 

o(* ̄︶ ̄*)o日积月累,每天进步一点点

Logo

为开发者提供学习成长、分享交流、生态实践、资源工具等服务,帮助开发者快速成长。

更多推荐