URLSearchParams/FormData
一、URLSearchParams()(很好用,但有一定兼容问题,未来版本的浏览器中该功能的语法和行为可能随对应的标准文档而改变。)
URLSearchParams 接口定义了一些实用的方法来处理 URL 的查询字符串(URL参数)。URL参数开头的'?' 字符会被忽略。
URLSearchParams() 构造器创建并返回一个新的URLSearchParams 对象。
实例方法:
| 方法 | 描述 |
| append() | 添加新的key/value到URL中。 |
| delete() | 删除所有匹配的key/value值,重复的key都被删除。 |
| entries() | 返回所有键值对key/value。 |
| get() | 返回与给定key匹配的第一个value值。 |
| getAll() | 返回所有与给定key匹配value值。 |
| has() | 查询指定key是否存在,返回一个布尔值。 |
| keys() | 返回所有键key。 |
| set() | 设置key的value值。 |
| toString() | 返回URL字符串。 |
| values() | 返回所有值。 |
部分方法示例:
var url = new URL('https://example.com?foo=1&bar=2&foo=4');
var params = new URLSearchParams(url.search); // url.search为URL参数:?foo=1&bar=2
for(let i of params){
console.log(i) // 使用for of可以直接遍历URLSearchParams对象实例。// ["foo", "1"] ["bar", "2"],
}
params.append("bd","3") // append(),添加新的key/value到URL中。
console.log(params.toString()) // toString(),返回URL字符串。 // foo=1&bar=2&bd=3
console.log(params.get("foo").toString()) ; // get(),返回与给定key匹配的第一个value值。 // 1
console.log(params.getAll("foo").toString()); // getAll(),返回所有与给定key匹配value值,数组。// 1,4
params.set("foo", "5") // set(),设置key的value值。
console.log(params.toString()) // foo=5&bar=2&bd=3
params.delete('bd') // delete(),删除所有匹配的key/value值,重复的key都被删除。
console.log(params.toString()); // foo=5&bar=2
使用场景:
1.处理URL参数
2.统一请求数据格式:
const params = new URLSearchParams();
params.append("url","www.example12345.com")
axios(params).then(res=>{})
------------------------------------------------------------------------------------------------------------------------------------------------------------------
二、FormData()
FormData 接口提供了一种表示表单数据的键值对的构造方式,经过它的数据可以使用 XMLHttpRequest.send() 方法送出,本接口和此方法都相当简单直接。如果送出时的编码类型被设为 "multipart/form-data",它会使用和表单一样的格式。
如果你想构建一个简单的GET请求,并且通过<form>的形式带有查询参数,可以将它直接传递给URLSearchParams。
实现了 FormData 接口的对象可以直接在for...of结构中使用,而不需要调用entries() : for (var p of myFormData) 的作用和 for (var p of myFormData.entries()) 是相同的。
比起普通的ajax,使用FormData的最大优点就是我们可以异步上传一个二进制文件。
FormData 和 URLSearchParams的实例方法大致相同。
URLSearchParams/FormData的更多相关文章
- 在 JS 中使用 fetch 更加高效地进行网络请求
在前端快速发展地过程中,为了契合更好的设计模式,产生了 fetch 框架,此文将简要介绍下 fetch 的基本使用. 我的源博客地址:http://blog.parryqiu.com/2016/03/ ...
- (转)这个API很“迷人”——新的Fetch API
原文:https://hacks.mozilla.org/2015/03/this-api-is-so-fetching 原标题是This API is So Fetching,Fetching也可以 ...
- fetch API
一.什么是fetch? fetch的作用类似于XMLHttpRequet的作用,用于异步请求网络,其提供的API更加的完善. fetch提供了Request和Response对象的定义,用于自定义网络 ...
- 原生http请求封装
满血复活,今天开始开始更新博客.随着es6的普遍应用,promise属性也随之用之普遍,我们在一些项目中,为了避免引入一些http库,节省空间,就简单将原生http请求做了封装处理,封装代码如下:(其 ...
- JS Fetch
使用Fetch 1.进行 fetch 请求 一个基本的 fetch请求设置起来很简单.看看下面的代码: fetch('http://example.com/movies.json') .then(fu ...
- fetch API 简单解读
http://f2e.souche.com/blog/fetch-api-jie-du/?utm_source=tuicool&utm_medium=referral 在我们日常的前端开发中, ...
- 使用 fetch 代替 ajax(在不支持的浏览器上使用 XHR); This kind of functionality was previously achieved using XMLHttpRequest.
原生 JS Ajax,GET和POST 请求实例代码_javascript技巧_脚本之家 https://www.jb51.net/article/86157.htm 更新时间:2016年06月08日 ...
- 关于 FormData 和 URLSearchParams
一.FormData FormData 接口提供了一种表示表单数据的键值对的构造方式,经过它的数据可以使用 XMLHttpRequest.send() 方法送出,本接口和此方法都相当简单直接.如果送出 ...
- 使用axios请求数据,post请求出错。因为axios传递的请求参数是json格式,而后端接口要求是formData
解决办法1:(IOS兼容性有问题,不推荐使用) // json格式转为formData格式,因为某些接口的原因 function json2formData(jsonData) { var param ...
随机推荐
- C#设计模式学习笔记:(11)享元模式
本笔记摘抄自:https://www.cnblogs.com/PatrickLiu/p/7792973.html,记录一下学习过程以备后续查用. 一.引言 今天我们要讲结构型设计模式的第六个模式--享 ...
- Python中verbaim标签使用详解
verbatim标签:默认在"DTL"模板中是会去解析那些特殊字符串的,比如{% 和 %}以及{{等.如果你在某个代码片段中不想使用"DTL"的解析引擎,那么就 ...
- Oracle命令行导入dmp文件
一.导入准备 使用impdp命令,需要在oracle数据库服务器操作: 使用sqlplus或者Oracle客户端(PL/SQL) 链接到相应的Oracle数据库实例,进行如下操作 1. 创建逻辑目录, ...
- 【EasyUI总结】EasyUI开发中遇到的坑
普遍: 1.easyui在书写键值对的时候要注意是否要加引号,在需要加引号的地方不加则无法渲染: datagrid数据网格: 1.datagrid默认请求方式是post,如果要使用分页功能pagina ...
- vue.config.js添加路径别名
在组件库中添加配置文件后其它文件需要引用它,此时想到利用路径的别名比较方便,相当于缩写了,请看下面的添加过程: (一)在vue.config.js文件中添加的内容如粗体字体所示: const path ...
- Java中List的父类与子类如何转换?
目录 定义 要点: 子类转父类 父类转子类 定义 A是B的子类,A比B多几条属性 要点: A是B的子类,但List<A>不是List<B>的子类.所以想直接转换是不行的. 子类 ...
- Redis-03-集群搭建
基于redis-3.2.4的Redis-Cluster集群搭建 原理 Redis 集群采用了P2P的模式,完全去中心化.Redis 把所有的 Key 分成了 16384 个 slot,每个 Redis ...
- c++多线程编程互斥锁初步
上一次讲述了多线程编程,但是由于线程是共享内存空间和资源的,这就导致:在使用多线程的时候,对于共享资源的控制要做的很好.先上程序: #include <iostream> #include ...
- vs2015配置cv文件,不用每次新建项目在配置
首先 选择空项目:新建完成后点击属性管理器 一定要确定你的环境是x86还是x64:我的是x64: 选择新的项目属性表 点击属性配置:配置cv的库目录.包含目录.链接器输入:可参考我前面的博文 Open ...
- 《The good doctor》视频笔记
第一季 第一弹可以看 角色 肖恩莫非 梅伦德斯 克莱尔·布朗 贾里德·卡鲁 道格拉斯院长 卡莉 青木 一个很厉害的女实习医生,忘记名字了 病理知识 自闭症:由于神经系统失调导致的发育障碍,其病征包括不 ...