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

他可以把对象转变成url上面查询信息的写法,例如a=1&b=2

可以把请求路由中的字符串   key=1 ,拼接成key:1   键值对格式,这样方便后端直接使用

用法:

配合fetch使用

btn.onclick = function(){
let obj = {
user:user.value,
age:age.value
}
fetch('/users',{
method:'post',
headers:{'Content-Type':'application/x-www-form-urlencoded'},
body:new URLSearchParams(obj).toString()
})
.then(d=>d.json())
.then(d=>{
console.log(d);
})
}

配合axios使用

const params = new URLSearchParams()
params.append('date', '2019')
params.append('date', '8')
params.append('date', '13')
axios({ method: 'get', url: '/',
params
})
.then((res) => { console.log(res.status) //
})// 请求链接为:http://localhost:8081/?date=2019&date=8&date=13

URLSearchParams 接口的更多相关文章

  1. URLSearchParams接口用来处理浏览器的url

    URLSearchParams 接口定义了一些实用的方法来处理 URL 的查询字符串. URLSearchParams.append()插入一个指定的键/值对作为新的搜索参数. URLSearchPa ...

  2. URLSearchParams 接口定义处理 URL 参数串

    基本使用方法如下 /* * URLSearchParams属性 * @语法:new URLSearchParams(parameter); */ (function(){ var str = &quo ...

  3. 一种快速构造和获取URL查询参数的方法:URLSearchParams

    URLSearchParams 接口定义了一些实用的方法来处理 URL 的查询字符串. URLSearchParams()是个构造函数,将返回一个可以操作查询字符串的对象. 常用方法: 1.构造查询字 ...

  4. new URLSearchParams( )用法说明

    URLSearchParams 接口定义了一些实用的方法来处理 URL 的查询字符串. 方法:该接口不继承任何属性. URLSearchParams.append() 插入一个指定的键/值对作为新的搜 ...

  5. 关于 FormData 和 URLSearchParams

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

  6. URLSearchParams/FormData

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

  7. JavaScript的URLSearchParams方法

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

  8. axios,vue-axios在项目中的应用

    Axios 是一个基于 promise 的 HTTP 库,可以用在浏览器和 node.js 中 关于axios的功能: 1,从浏览器中创建XMLHttpRequests 2,从node.js常见Htt ...

  9. Axios 使用时遇到的问题

    最近使用 vue 构建一个小项目,在使用 axios 发送 post 请求的时候,发现 axios 发送数据默认使用 json 格式,百度搜了下,更改 ContentType 不管用,最终问题原来是: ...

随机推荐

  1. <Android基础>(三) UI开发 Part 1

    1.常用控件 1)TextView 2)Button 3)EditText 4)ImageView 5)ProgressBar 6)AlertDialog 7)ProgressDialog 2.四种布 ...

  2. NOIP2011Mayan游戏(模拟)

    Mayan puzzle是最近流行起来的一个游戏.游戏界面是一个77 行\times 5×5列的棋盘,上面堆放着一些方块,方块不能悬空堆放,即方块必须放在最下面一行,或者放在其他方块之上.游戏通关是指 ...

  3. 讲道理,为什么分布式一定要有Redis?

    考虑到绝大部分写业务的程序员,在实际开发中使用 Redis 的时候,只会 Set Value 和 Get Value 两个操作,对 Redis 整体缺乏一个认知.所以我斗胆以 Redis 为题材,对  ...

  4. 在 Docker 中使用 mysql 的一些技巧

    启动到后台:  docker-compose start docker-composer 执行命令: entrypoint: pwd app: build: ./app working_dir: /a ...

  5. SRM 600 div 2 T 2

    题意:给你50个数,问你最少去掉多少数能使得剩下的数不可能具备子集S,OR起来为goal 如果一个数不是goal的子状态,那么我们没必要删除他,所以我们只关心goal的子状态的数 1:如果所有的数OR ...

  6. A1132. Cut Integer

    Cutting an integer means to cut a K digits lone integer Z into two integers of (K/2) digits long int ...

  7. Redis在python中的使用

    一 简介 redis是一个key-value存储系统.和Memcached类似,它支持存储的value类型相对更多,包括string(字符串).list(链表).set(集合).zset(sorted ...

  8. ubuntu下 pthread_mutex_init man中查不到

    问题: 如题所述,包括pthread_mutex_init 和 pthread_mutex_lock 这些函数都找不到 解决办法: 安装manpages:manpages-posix-dev Mint ...

  9. 关于递推算法求解约瑟夫环问题P(n,m,k,s)

    一. 问题描述 已知n个人,分别以编号1,2,3,...,n表示,围坐在一张圆桌周围.从编号为k的人开始报数1,数到m的那个人出列:他的下一个人又从1开始报数,数到m的那个人又出列:依此规律重复下去, ...

  10. C语言进阶——Day 1

    C语言提高笔记 Day 1 小数据赋给大变量,首位是1则在前面自动补充1,首位是0则在前方自动补充0. 大数据赋给小变量,低位字节对齐,truncate截断,有可能会造成数据丢失. 程序和进程的差别: ...