一、FormData

  FormData 接口提供了一种表示表单数据的键值对的构造方式,经过它的数据可以使用 XMLHttpRequest.send() 方法送出,本接口和此方法都相当简单直接。如果送出时的编码类型被设为 "multipart/form-data",它会使用和表单一样的格式。

如果你想构建一个简单的GET请求,并且通过<form>的形式带有查询参数,可以将它直接传递给URLSearchParams

实现了 FormData 接口的对象可以直接在for...of结构中使用

二,URLSearchParams

  URLSearchParams 接口定义了一些实用的方法来处理 URL 的查询字符串。一个实现了 URLSearchParams 的对象可以直接用在 for...of 结构中

  

 var url = '?q=URLUtils.searchParams&topic=api';
var searchParams = new URLSearchParams(paramsString);
for (let p of searchParams) {
console.log(p);
} searchParams.has("topic") === true; // true
searchParams.get("topic") === "api"; // true
searchParams.getAll("topic"); // ["api"]
searchParams.get("foo") === ""; // true
searchParams.append("topic", "webdev");
searchParams.toString(); // "q=URLUtils.searchParams&topic=api&topic=webdev"
searchParams.set("topic", "More webdev");
searchParams.toString(); // "q=URLUtils.searchParams&topic=More+webdev"
searchParams.delete("topic");
searchParams.toString(); // "q=URLUtils.searchParams"

  

关于 FormData 和 URLSearchParams的更多相关文章

  1. URLSearchParams/FormData

    一.URLSearchParams()(很好用,但有一定兼容问题,未来版本的浏览器中该功能的语法和行为可能随对应的标准文档而改变.) URLSearchParams 接口定义了一些实用的方法来处理 U ...

  2. fetch 资源请求

    简介:fetch() 方法用于发起获取资源的请求.它返回一个 promise,这个 promise 会在请求响应后被 resolve,并传回 Response 对象. 为了更好的体验,可点击这里阅读 ...

  3. 让fetch也可以timeout

    原生的HTML5 API fetch并不支持timeout属性,习惯了jQuery的ajax配置的同学,如果一时在fetch找不到配置timeout的地方,也许会很纠结.fetch 的配置 API 如 ...

  4. React Native教程 - 调用Web API

    react-native官网Fetch介绍:https://facebook.github.io/react-native/docs/network.html#content react-native ...

  5. Async CallBack promise fetch

    Callback (回调函数) 在计算机程序设计中,回调函数,或简称回调(Callback 即call then back 被主函数调用运算后会返回主函数),是指通过函数参数传递到其它代码的,某一块可 ...

  6. Web高级 Ajax和跨域CORS

    Asynchronous JavaScript and XML 1. XMLHttpRequest 前端开发都知道,不多说. var xhr = new XMLHttpRequest(); xhr.o ...

  7. [转] 学会fetch的用法

    fetch是web提供的一个可以获取异步资源的api,目前还没有被所有浏览器支持,它提供的api返回的是Promise对象,所以你在了解这个api前首先得了解Promise的用法.参考阮老师的文章 那 ...

  8. Fetch API 接口参考

    前言 Fetch API是新的ajax解决方案,用于解决古老的XHR对象不能实现的问题,Fetch API 提供了一个获取资源的接口(包括跨域请求),任何使用过 XMLHttpRequest 的人都能 ...

  9. React Native网络编程之Fetch

    目录 1.前言 2.什么是Fetch 3.最简单的应用 4.支持的请求参数 - 4.1. 参数详讲 - 4.2. 示例 5.请求错误与异常处理   1. 前言   网络请求是开发APP中不可或缺的一部 ...

随机推荐

  1. 安装 cx_Oracle

    1.下载 oracle client instant  和  sdk,  全部解压到 /opt/instantclient_11_2/ http://www.oracle.com/technetwor ...

  2. Web渗透三字经

    网络上曾流传一段Web渗透三字经,如下: 用搜索 找注入 没注入 就旁注 没旁注 用0day 没0day 扫目录 找后台 爆账户 传小马 放大马 拿权限 挂页面 放暗链 清数据 清日志 留后门 然后我 ...

  3. CentOS下重启uwsgi

    使用Django开发项目,每次修改内容无法刷新,重启nginx也无效,每次都重启主机, 网上搜索很多资料,发现可以重启uwsgi来解决问题,但是发现uwsgi重启每个人都不一样,很多人写了脚本重启 我 ...

  4. 技巧专题3(cdq分治、整体二分等)

    cdq分治与整体二分 cdq来源于2008年国家集训队作业陈丹琦(雅礼巨佬),用一个log的代价完成从静态到动态(很多时候是减少时间那一维的). 对于一个时间段[L, R],我们取mid = (L + ...

  5. Android4.0以上源码中的DiskLruCache类简介

    /* * Copyright (C) 2011 The Android Open Source Project * * Licensed under the Apache License, Versi ...

  6. Apache Camel继承Spring Boot 实现文件远程复制和转移

    pom.xml <dependency> <groupId>org.apache.camel</groupId> <artifactId>camel-f ...

  7. WebSocket简述

    WebSocket 是 HTML5 开始提供的一种在单个 TCP 连接上进行全双工通讯的协议. WebSocket 使得客户端和服务器之间的数据交换变得更加简单,允许服务端主动向客户端推送数据.在 W ...

  8. @游记@ CSP2019

    目录 @day -??@ @day -1@ @day 0@ @day 1@ @day 2@ @day ??@ @day ??+1@ @day -??@ 和 yhn 学长在校外偶遇. 聊了一些.他说现在 ...

  9. nginx设置301永久重定向

    https://blog.csdn.net/wzqzhq/article/details/53376501 比如说我的域名有多个,一个主域名www.zq110.com,多个次域名:www.aaa.co ...

  10. javascript中数字的一些常规操作

    1,禁止输入 - (减号.负号) // html <input type="number" class="no-negative"> // js $ ...