axios.post中contenttype 为application/x-www-form-urlencoded 和 application/json 区别和说明

说明：这两个都是发送请求的格式说明

1.application/x-www-form-urlencoded

       在Form元素的语法中，EncType表明提交数据的格式 用 Enctype 属性指定将数据回发到服务器时浏览器使用的编码类型。 下边是说明： application/x-www-form-urlencoded： 窗体数据被编码为名称/值对。这是标准的编码格式。 multipart/form-data： 窗体数据被编码为一条消息，页上的每个控件对应消息中的一个部分。 text/plain： 窗体数据以纯文本形式进行编码，其中不含任何控件或格式字符。
 补充
       form的enctype属性为编码方式，常用有两种：application/x-www-form-urlencoded和multipart/form-data，默认为application/x-www-form-urlencoded。 当action为get时候，浏览器用x-www-form-urlencoded的编码方式把form数据转换成一个字串（name1=value1&name2=value2...），然后把这个字串append到url后面，用?分割，加载这个新的url。 当action为post时候，浏览器把form数据封装到http body中，然后发送到server。 如果没有type=file的控件，用默认的application/x-www-form-urlencoded就可以了。 但是如果有type=file的话，就要用到multipart/form-data了。浏览器会把整个表单以控件为单位分割，并为每个部分加上Content-Disposition(form-data或者file),Content-Type(默认为text/plain),name(控件name)等信息，并加上分割符(boundary).

      这里用cdn引用axios和qs,一般在app.js或者在mian.js(或者建一个公用js在需要的地方引用即可)设置axios.post的请求头如下:

  Vue.prototype.$axios = axios;
  Vue.prototype.$qs = Qs;

  //响应超时时间
  axios.defaults.timeout = 5000;
  //使用axios.post要设置此响应头，否则后台无法获取数据
  axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded;charset=UTF-8';
  //请求的地址
  axios.defaults.baseURL = 'http://localhost:9090/';

  通过axios.post传输参数还是在浏览器暴露出所传参数，暂时不清楚原因，官网也没有说明。

 

2. application/json

    有的时候发现  ajax请求中  content-type:application/json,这样也能在后台接受前台提交的数据，其实这个时候前端提交的数据是 json格式的字符串，后端要用@requestbody注解来接收

如果项目框架是springboot/springmvc，直接用@RestController接收也可以。