资讯专栏INFORMATION COLUMN

URLSearchParams 接口

IamDLY / 1251人阅读

摘要:接口定义了很多个用来处理参数串的方法。基本使用方法如下,注意返回空字符串还有三个方法返回迭代器对象遍历所有参数名遍历所有参数值遍历所有参数的键值对实例可以当作数据发送,所有数据都会编码。的元素节点的属性,就是一个实例。还可以与接口结合使用。

URLSearchParams 接口定义了很多个用来处理 URL 参数串的方法。

基本使用方法如下

var paramsString = "q=URLUtils.searchParams&topic=api"  // location.search.slice(1)
var searchParams = new URLSearchParams(paramsString);

searchParams.has("topic") // true
searchParams.get("topic") // "api"
searchParams.getAll("topic") // ["api"]

searchParams.get("foo") // null,注意Firefox返回空字符串
searchParams.set("foo", 2);
searchParams.get("foo") // 2

searchParams.append("topic", "webdev");
searchParams.toString() // "q=URLUtils.searchParams&topic=api&foo=2&topic=webdev"

searchParams.append("foo", 3);
searchParams.getAll("foo") // [2, 3]

searchParams.delete("topic");
searchParams.toString() // "q=URLUtils.searchParams&foo=2&foo=3"

URLSearchParams 还有三个方法返回迭代器对象:
keys() 遍历所有参数名
values() 遍历所有参数值
entries() 遍历所有参数的键值对

URLSearchParams实例可以当作POST数据发送,所有数据都会URL编码。

fetch("https://example.com/api", {
  method: "POST",
  body: params
}).then(...)

DOM 的 a 元素节点的 searchParams 属性,就是一个 URLSearchParams 实例。

var a = document.createElement("a");
a.href = "https://example.com?filter=api";
a.searchParams.get("filter") // "api"

URLSearchParams 还可以与 URL 接口结合使用。

var url = new URL(location);
var foo = url.searchParams.get("foo") || "somedefault";

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/86375.html

相关文章

  • URLSearchParams初体验

    摘要:是需要删除的键值名称。创建一个测试用对象显示键值对获取指定搜索参数的第一个值。为参数添加第二个值输出返回判断是否存在此搜索参数。返回此对象包含了键值对的所有键名。具体的使用方法大家可以参照库的相关说明。 在之前发的工具方法文章的留言中有人就关于验证网址的操作时可以使用URL对象,之后有人提到了URLSearchParams这个URL对象接口。由于之前没有接触过,所以搜索了一下具体的用处...

    Channe 评论0 收藏0
  • axios使用心得总结

    摘要:最近项目中使用也遇到了一些问题,就借此机会总结一下,如有错误,还请不吝指正。而在使用时对应的传参使用的是,是作为请求体发送的,同样使用这种形式的还有等请求方式。层在环境中可以使用。 Axios是一个基于Promise的 HTTP 库,可以用在浏览器和node.js 中,因为尤大大的推荐,axios也变得越来越流行。最近项目中使用axios也遇到了一些问题,就借此机会总结一下,如有错误,...

    Lowky 评论0 收藏0
  • fetch,终于认识你

    摘要:说明一点,下面演示的请求或请求,都是采用百度中查询到的一些接口,可能传递的有些参数这个接口并不会解析,但不会影响这个接口的使用。 fetch和XMLHttpRequest 如果看网上的fetch教程,会首先对比XMLHttpRequest和fetch的优劣,然后引出一堆看了很快会忘记的内容(本人记性不好)。因此,我写一篇关于fetch的文章,为了自己看着方便,毕竟工作中用到的也就是一些...

    wzyplus 评论0 收藏0
  • JavaScript fetch接口

    摘要:的案例下面我们来写第一个获取后端数据的例子通过获取百度的错误提示页面返回一个对象是一个对象是最终的结果请求请求初步完成了,这个时候就要来认识一下请求如何处理了。 JavaScript fetch接口 如果看网上的fetch教程,会首先对比XMLHttpRequest和fetch的优劣,然后引出一堆看了很快会忘记的内容(本人记性不好)。因此,我写一篇关于fetch的文章,为了自己看着方便...

    Sanchi 评论0 收藏0

发表评论

0条评论

IamDLY

|高级讲师

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<