企业管理系统定制开发前端ajax的application/x-www-form-urlencoded 参数提交

         企业管理系统定制开发在开发中常用的Content-Type有application/x-www-form-urlencoded和application/json，企业管理系统定制开发作为有必要了解一些前端开发知识，对于这俩种类型前端是如果构造参数的，有必要了解一下前端是如何构造参数的，因为在日常开发中，如果你不清楚的话，跟前端对接时经常你因为你定义某种接收参数类型，而前端传的另外一种类型导致联调时不必要的麻烦！

        1.application/是常见的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后端如何接受方式，可参考如下俩篇文章。

 

o(*￣︶￣*)o日积月累，每天进步一点点