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 等于这个值。直接来看一个请求示例
ajax接口数据传输方法与传输文件时的出现的错误的归纳
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’

上一篇:初识JSON(parse/stringify/eval方法)


下一篇:你不知道的 JavaScript 系列中( 24 ) - toString()和JSON.stringify()