一、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的更多相关文章

  1. 在 JS 中使用 fetch 更加高效地进行网络请求

    在前端快速发展地过程中,为了契合更好的设计模式,产生了 fetch 框架,此文将简要介绍下 fetch 的基本使用. 我的源博客地址:http://blog.parryqiu.com/2016/03/ ...

  2. (转)这个API很“迷人”——新的Fetch API

    原文:https://hacks.mozilla.org/2015/03/this-api-is-so-fetching 原标题是This API is So Fetching,Fetching也可以 ...

  3. fetch API

    一.什么是fetch? fetch的作用类似于XMLHttpRequet的作用,用于异步请求网络,其提供的API更加的完善. fetch提供了Request和Response对象的定义,用于自定义网络 ...

  4. 原生http请求封装

    满血复活,今天开始开始更新博客.随着es6的普遍应用,promise属性也随之用之普遍,我们在一些项目中,为了避免引入一些http库,节省空间,就简单将原生http请求做了封装处理,封装代码如下:(其 ...

  5. JS Fetch

    使用Fetch 1.进行 fetch 请求 一个基本的 fetch请求设置起来很简单.看看下面的代码: fetch('http://example.com/movies.json') .then(fu ...

  6. fetch API 简单解读

    http://f2e.souche.com/blog/fetch-api-jie-du/?utm_source=tuicool&utm_medium=referral 在我们日常的前端开发中, ...

  7. 使用 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日 ...

  8. 关于 FormData 和 URLSearchParams

    一.FormData FormData 接口提供了一种表示表单数据的键值对的构造方式,经过它的数据可以使用 XMLHttpRequest.send() 方法送出,本接口和此方法都相当简单直接.如果送出 ...

  9. 使用axios请求数据,post请求出错。因为axios传递的请求参数是json格式,而后端接口要求是formData

    解决办法1:(IOS兼容性有问题,不推荐使用) // json格式转为formData格式,因为某些接口的原因 function json2formData(jsonData) { var param ...

随机推荐

  1. HTML连载71-翻转菜单练习

    一.翻转菜单练习​ <!DOCTYPE html> <html lang="en"> <head> <meta charset=" ...

  2. 12.python内置模块之sys模块介绍

    python的sys模块是与python解释器交互的一个接口,提供对解释器使用或维护的一些变量的访问,即与解释器强烈交互的函数. sys模块的常用函数: 1.sys.argv:命令行参数列表.第一个元 ...

  3. Apache Log4j 反序列化代码执行(CVE-2019-17571) 漏洞分析

    Apache Log4j 漏洞分析 仅用于研究漏洞原理,禁止用于非法用途,后果自负!!! CVE-2019-17571 漏洞描述 Log4j是美国阿帕奇(Apache)软件基金会的一款基于Java的开 ...

  4. 如何在IDEA的maven项目中连接并使用MySQL8.0

    首先看一下我的基本的开发环境: 操作系统:MacOS 10.13.5 编辑器:IDEA 2018.3 其他:MySQL8.0.15.Maven 3.3.9.JDK 1.8 好,下面就正式开始: 第一步 ...

  5. kubernetes 资源管理

    前言 在kubernetes环境下,无论集群再大,对应的集群资源(cpu.memory.storage)总是有上限的.而默认情况下,我们启动的pod.以及pod中运行的容器,对应的资源是不加限制的.理 ...

  6. .NET CORE(C#) WPF 方便的实现用户控件切换(祝大家新年快乐)

    微信公众号:Dotnet9,网站:Dotnet9,问题或建议:请网站留言, 如果对您有所帮助:欢迎赞赏. .NET CORE(C#) WPF 方便的实现用户控件切换(祝大家新年快乐) 快到2020年了 ...

  7. Java Web笔记(2)

    学习笔记,狂神说java,链接:https://www.bilibili.com/video/av68833391 5.Maven 我为什么要学习这个技术? 在Javaweb开发中,需要使用大量的ja ...

  8. Django---Django连接Mysql数据库

    前面介绍了Django平台的数据交互,这些数据都是在本地存放着,修改内容或者重新启动服务,数据就消失了,如果我们把数据存放在数据库中,不就保存了吗? Django数据库 Django中自带的也有数据库 ...

  9. P1217 [USACO1.5]回文质数 Prime Palindromes(stringstream,sizeof(num)/sizeof(num[0]),打表)

    题目描述 因为 151 既是一个质数又是一个回文数(从左到右和从右到左是看一样的),所以 151 是回文质数. 写一个程序来找出范围 [a,b](5≤a<b≤100,000,000)( 一亿)间 ...

  10. P1000题解 超级玛丽游戏

    P1000这么难,必须要水一篇题解/斜眼笑 ******** ************ ####....#. #..###.....##.... ###.......###### ### ### .. ...