仿造vue-resource的formdata传对象
众插件不支持同步,也是没办法的事情,具体为啥就不分析了,确实搞不懂。
一直用vue-resource的post,觉得很舒服。
然,没办法只能仿造一个,自己提供一个同步方法
几个点先摆清楚
1. .then()方法:几经百度,原来是Promise套路,原谅我的无知,可能不是什么新鲜事物,不晓得的同学自己百度一下吧。不是很复杂。
2. formdata,用法满天飞,搞到最后也是晕乎乎,毕竟模拟Form提交时并没有太深层的嵌套数据结构,基本上是值对,like name = 'zhang' gander = '1' 这种的数据。对于比较深层的嵌套数据,一脸蒙蔽的百度不到解法。举个例子{list:[{a:1,b:2},{a:2,b:1}]},一句话,也是个鸡肋。(没深究,莫笑愚浅薄,脑袋不够用)
3. 额,第三是啥来着,二胡了,算了。
想仿造先分析,说实话写这个文压力有点大,可能有更简洁的办法去分析,哥不会。
按理说,去看源码应该是最省事的,没准还能找到一步到位的方法,哥早已经被源码绕晕了,原来js还能那么写,大神!!
还是按照哥的套路来吧。
1. 数据:formdata数据,并不一定要用FormData去造,这是我最先想到的。跟踪一下,什么秘密都没有。
formdata 结构就是如此,点 view source 有更详细的源码
不要怕,看到这些应该高兴才是,这是encodeURIComponent的结果,可以用decodeURIComponent来翻译
list[][dirname]=D:/xampp/htdocs/wnds/sound&list[][basename]=error_tips.mp3&list[][extension]=mp3&list[][filename]=error_tips&list[][isSelected][value]=true&list[][type]=file&list[][img]=images/file_icon/icon_file/file.png&list[][dirname]=D:/xampp/htdocs/wnds/sound&list[][basename]=file_remove.mp3&list[][extension]=mp3&list[][filename]=file_remove&list[][isSelected][value]=true&list[][type]=file&list[][img]=images/file_icon/icon_file/file.png&list[][dirname]=D:/xampp/htdocs/wnds/sound&list[][basename]=folder_open.mp3&list[][extension]=mp3&list[][filename]=folder_open&list[][isSelected][value]=true&list[][type]=file&list[][img]=images/file_icon/icon_file/file.png&list[][dirname]=D:/xampp/htdocs/wnds/sound&list[][basename]=recycle_clear.mp3&list[][extension]=mp3&list[][filename]=recycle_clear&list[][isSelected][value]=true&list[][type]=file&list[][img]=images/file_icon/icon_file/file.png
你看,翻译完了,就都清楚了,这是一个字符串,配合类结构可以知道,这是每个变量的串接。
list[0][dirname]=D:/xampp/htdocs/wnds/sound
细看这个,这是一个变量和它的路径的表示,这个变量值位于整个数据中的路径就是前面的各种下标和名称。
请注意,我把路径一词加大了,这就是一个路径问题。通过一系列嵌套计算,就可以得到的。
也就是说,formdata的数据结构就是 路径 = 值 & 路径 = 值 分析到这里,一切都是那么的宁静安详,预示着,问题解开了。(问题不是关键,关键是分析的过程,啊哈哈哈哈) 那么如何去构造它呢?
一个函数足以搞定
function trans(data,key = ''){
var ret = ""
if(typeof data == 'object'){
for(let it in data){
ret += trans(data[it],key + (key == ''?it:"["+ it + "]"))
}
}else if(Array.isArray(data)){
for(var i = 0;i < data.length;i++){
ret += trans(data[i],key + "[" + i + "]")
}
}else{
ret +=encodeURIComponent( key) + '=' + encodeURIComponent(data) + "&"
}
return ret
}
简单伐?
几点注意,都是我填坑填出来的。
1. 最外层是没有[]的,所有路径最外层是没有[]的表示一个数组的名称。
2. 所有=都没有被翻译成urlstring
如此
最大的问题解决了,我们构造了一个formdata,那么将这个formdata传出去即可了。
完整的代码分享一下,请不要学我的不规范,完成自己的js文件
var gp = {
get: function(url) {
return this._get(url, true)
},
synget: function(url) {
return this._get(url, false)
},
_get: function(url, syn) {
const promise = new Promise(function(resolve, reject) {
const handler = function() {
if(this.readyState !== 4) {
return;
}
if(this.status === 200) {
resolve(this.response);
} else {
reject(new Error(this.statusText));
}
}
var request = new XMLHttpRequest()
request.open('GET', url, syn)
request.onreadystatechange = handler
request.send(null)
})
return promise
},
post: function(url, data) {
return this._post(url, data, true)
},
synpost: function(url, data) {
return this._post(url, data, false)
},
_post: function(url, data, syn) {
const promise = new Promise(function(resolve, reject) {
const handler = function() {
if(this.readyState !== 4) {
return;
}
if(this.status === 200) {
resolve(this.response);
} else {
reject(new Error(this.statusText));
}
}
var request = new XMLHttpRequest()
request.open('POST', url, syn)
request.setRequestHeader("Content-Type","application/x-www-form-urlencoded")
request.onreadystatechange = handler var ret = gp._trans(data) request.send(ret.substr(0,ret.length-1))
})
return promise
},
_trans : function(data,key = ''){
var ret = ""
if(typeof data == 'object'){
for(let it in data){
ret += gp._trans(data[it],key + (key == ''?it:"["+ it + "]"))
}
}else if(Array.isArray(data)){
for(var i = 0;i < data.length;i++){
ret += gp._trans(data[i],key + "[" + i + "]")
}
}else{
ret +=encodeURIComponent( key) + '=' + encodeURIComponent(data) + "&"
}
return ret
}
}
仿造vue-resource的formdata传对象的更多相关文章
- vue axios使用form-data的形式提交数据的问题
vue axios使用form-data的形式提交数据vue axios request payload form data由于axios默认发送数据时,数据格式是Request Payload,而并 ...
- FormData js对象的介绍和使用
FormData js对象的介绍和使用 FormData对象,可以把所有表单元素的name与value组成一个queryString,提交到后台. 在使用ajax提交时,使用FormData对象可以减 ...
- vue中el-upload上传多图片且携带参数,批量而不是一张一张的解决方案
现在前端基本不是vue技术栈就是react技术栈. vue技术栈最常用的就是element-ui的ui框架了. 在项目中,我们经常会碰到这种需求:批量上传文件 element-ui 确实也为我们提供了 ...
- vue大文件上传组件选哪个好?
需求:项目要支持大文件上传功能,经过讨论,初步将文件上传大小控制在500M内,因此自己需要在项目中进行文件上传部分的调整和配置,自己将大小都以501M来进行限制. 第一步: 前端修改 由于项目使用的是 ...
- nuxtjs在vue组件中使用window对象编译报错的解决方法
我们知道nuxtjs是做服务端渲染的,他有很多声明周期是运行在服务端的,以及正常的vue声明周期mounted之前均是在服务端运行的,那么服务端是没有比如window对象的location.navag ...
- vue多文件上传进度条 进度不更新问题
转自 hhttp://www.cnblogs.com/muge10/p/6767493.html 感谢这位兄弟的文章,之前因为这个问题 ,我连续在sgmentflow上提问过多次,完全没人能回答.谢谢 ...
- vue resource 携带cookie请求 vue cookie 跨域
vue resource 携带cookie请求 vue cookie 跨域 1.依赖VueResource 确保已安装vue-resource到项目中,找到当前项目,命令行输入: npm instal ...
- onclick传对象
用onclick传对象的时候,用jquery无法进行操作 onclick=(this) 接收到参数后只需要转化一下 console.log($(obj).html());
- 小程序-formdata传参
项目背景,后端接口要求formData传参: 在util.js文件中封装转化函数,代码如下: const formatTime = date => { const year = date.get ...
随机推荐
- TCP的建立和关闭
一.TCP头信息 简单的至少应该知道,源端口,目的端口,序号,确认号,标志位,校验和 二.TCP的建立 1.客户端将SYN标志位置1,同时生成随机的序号,确认号是0. 2.服务器接收到SYN,知道有人 ...
- 【[TJOI2007]可爱的质数】
题目 用一道板子题来复习一下\(bsgs\) \(bsgs\)用于求解形如 \[a^x\equiv b(mod\ p)\] 这样的高次不定方程 由于费马小定理的存在,我们可是直接暴力扫一遍\(p\), ...
- [18/11/20]break与continue的区别
一.普通break 和continue 1.break: break用于强行退出循环,不执行循环中剩余的语句. 2.continue continue 语句用在循环语句体中,用于终止某次循环过程,即跳 ...
- Oracle书写格式
字符串和日期要包含在单引号中 字符大小写敏感,日期格式敏感 默认日期格式:dd - MON - RR select * from emp where last_name = 'King' where ...
- 【PTA 天梯赛训练】QQ帐户的申请与登陆(散列+set模拟)
实现QQ新帐户申请和老帐户登陆的简化版功能.最大挑战是:据说现在的QQ号码已经有10位数了. 输入格式: 输入首先给出一个正整数N(≤10^5),随后给出N行指令.每行指令的格式为:“命令符(空格)Q ...
- <寒假逆向学习第一天> 破解基础知识之介绍常见工具和壳的特征
对于我们新手来说,程序是什么语言编写的?程序到底有没有加壳?程序加了什么壳?一直在我们心中充满了疑惑,本文我将根据我的近期学习,总结一下常见的工具和壳的特征. 一:程序是什么语言编译的 从目前接触到程 ...
- VMware ESXi-6.7——使用
1: 上传ISO文件 1.1:创建一个新目录,上传ISO 1.2: 在新建虚拟机时,点击DVD,选择数据ISO文件,选择要安装的ISO文件.并把连接打钩. 2:新建虚拟机 按照需求填写 硬盘的三种置备 ...
- VM虚拟机网卡LAN区段模拟内网使用教程
目录 1. 测试环境 2. 设置LAN区段并测试 2.1. 添加LAN区段 2.2. 在虚拟机中设置静态IP地址 2.3. 测试同一LAN区段的主机是否可以联通 2.4 ...
- 关于SSM项目注解事务不回滚的问题
<!--扫描service包(包含子包)下所有使用注解的类型--> <context:component-scan base-package="com.song.ssm.s ...
- Windows下安装最新版的MongoDB
最近学习爬虫需要用到MongoDB来存储数据,在安装过程遇到了一些坑,在这里总结一些. 安装环境:Windows 10 安装步骤: 1.下载安装文件 下载地址:https://www.mongodb. ...