ajax接口数据传输方法与传输文件时的出现的错误的归纳

一、
1，application/x-www-form-urlencoded
浏览器的原生 form 表单，如果不设置 enctype 属性，那么最终就会以 application/x-www-form-urlencoded 方式提交数据。
在这里插入图片描述
首先，Content-Type 被指定为 application/x-www-form-urlencoded；其次，提交的数据按照 key1=val1&key2=val2 的方式进行编码，key 和 val 会进行了 URL 转码。大部分服务端语言都对这种方式有很好的支持。例如 PHP 中，$_POST[‘XXX’] 可以获取到相应的值。
数据：
Form Data
a:1
b:2
2.multipart/form-data
我们使用表单上传文件时，就要让 form 的 enctype 等于这个值。直接来看一个请求示例

3.application/json
application/json 这个 Content-Type 作为响应头大家肯定不陌生。实际上，现在越来越多的人把它作为请求头，用来告诉服务端消息主体是序列化后的 JSON 字符串。由于 JSON 规范的流行，除了低版本 IE 之外的各大浏览器都原生支持 JSON.stringify，服务端语言也都有处理 JSON 的函数，使用 JSON 不会遇上什么麻烦
Request Payload:{a:1,b:2}
a:1
b:2
ajax实现方式（axios使用这种方式提交时，需要自己json序列化）
4，text/xml
相比于JSON，XML不能更好的适用于数据交换，它包含了太多的包装, 而且它跟大多数编程语言的数据模型不匹配，让大多数程序员感到诧异，XML是面向数据的，JSON是面向对象和结构的，后者会给程序员一种更加亲切的感觉。
我们现在一般这样来使用：
1、XML 存储数据，存储配置文件等需要结构化存储的地方使用；
2、数据传输、数据交互使用JSON；
下面就是ajax Content-Type为text/xml的请求：
二、项目中用axios方式，后台接受/x-www-form-urlencoded，由于axios默认数据是json方式，所以需要自己设置请求头
headers: {
‘Content-Type’: ‘application/x-www-form-urlencoded; charset=UTF-8’
},
数据格式使用qs进行转换。在有参数和有文件的情况下，出现了问题

1.在传输文件的时候将文件和参数一起放在一个对象里面，然后使用了 Qs.stringify(），使得文件传输失败，显示：
参数名[uid]:一些数字，起初以为是我的文件是被某个框架封装过的， 许久才发现是file文件被过滤，直接append到FormData的是传输时显示file:(binary),这正是我想要的。其他的解决方法如下：
转载自：
http://www.mamicode.com/info-detail-2900472.html
上传文件时，将file对象，经过Qs.stringfly处理后，file文件被过滤

aa(event){//选择的excel文件
var file=event.target.files[0];
console.log(file);
var reader = new FileReader();
reader.readAsBinaryString(file);
reader.οnlοad=(e=>{
var bb={lang:1,fileinfo:e.target.result,enen:2};
console.log(bb)
var xx = Qs.stringify(bb);
console.log(xx);
})

          } 		以上是处理方法，原因是我们拿到的file是File的示例，不包含文件，需要filereader才能获取到真实文件。
   		问题还原：
   		var bb={lang:1,fileinfo:function(){},enen:2};
              console.log(bb)
              var xx = Qs.stringify(bb);
              console.log(xx);

2.以及数组在使用Qs.stringify(）时候也不是直接丢进去就行
https://blog.csdn.net/sayoko06/article/details/86131498

qs是一个npm仓库所管理的包,可通过npm install qs命令进行安装.

1. qs.parse()将URL解析成对象的形式 const Qs = require(‘qs’); let url = ‘method=query_sql_dataset_data&projectId=85&appToken=7d22e38e-5717-11e7-907b-a6006ad3dba0’;
   Qs.parse(url); console.log(Qs.parse(url)); 处理结果会变成json格式的对象字符串

2. qs.stringify()将对象 序列化成URL的形式，以&进行拼接 在使用vue提交表单的时候，表单中有select多选框，提交的数据中包含数组，在通过qs.stringify处理后，在后台接收不到数组的参数，查阅资料发现需要设置数组的arrayFormat，如下面例子：

qs.stringify({imgIds: [48,49]},{arrayFormat: ‘brackets’})
arrayFormat可以格式化你的数组参数，有三种形式，这里选择brackets就可以了

格式化数组参数的三种方法：

qs.stringify({ a: [‘b’, ‘c’] }, { arrayFormat: ‘indices’ }) //
‘a[0]=b&a[1]=c’ qs.stringify({ a: [‘b’, ‘c’] }, { arrayFormat:
‘brackets’ }) // ‘a[]=b&a[]=c’ qs.stringify({ a: [‘b’, ‘c’] }, {
arrayFormat: ‘repeat’ }) // ‘a=b&a=c’