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. python的生成器与迭代器和可迭代对象

    来简单的说下python中的生成器和可迭代对象以及迭代器的问题.只是简单地记录一下并不涉及太深入的内容. 首先来说一下什么是生成器,先看下面的代码: #_*_ coding:utf-8 _*_ res ...

  2. JumpServer 跳板机系统

    Jumpserver项目为开源项目,截至到目前最新版本为4.0,4.0功能并不完整,无上传.下载功能,配置复杂.启动服务也较繁琐,推荐使用0.3.2版本,文档较全,安装简单文档链接https://gi ...

  3. [CF1131C]Birthday【贪心】

    题目描述 有 n n个数摆放在一个环形中(最后一个与第一个相邻),需要改变这些数的顺序,使得相邻两个数的最大绝对差最小.如果有多种最佳方案,输出任意一种. (翻译来自洛谷) 分析 首先收尾相接,那么很 ...

  4. debian源

    修改debian9 stretch源 修改配置文件/etc/apt/sources.list 修改成163源: deb http://mirrors.163.com/debian/ stretch m ...

  5. Spring Cloud下基于OAUTH2认证授权的实现

    GitHub(spring -boot 2.0.0):https://github.com/bigben0123/uaa-zuul 示例(spring -boot 2.0.0): https://gi ...

  6. react-native---rn中的修饰组件(TouchableHightlight、TouchableOpacity、TouchableNativeFeedback等)

    react-native中View组件这是单纯的视图容器,并不能响应交互变化,绑定事件,rn提供了TouchableOpacity等封装组件以正确响应触摸操作. TouchableWithoutFee ...

  7. surfer画世界频率分布图(等高线、地点标注)

    以surfer 12版本为例: 1.下载世界地图,这里我随便提供一个范例(侵删,忘记出处了): 2.进入surfer软件,选择“MAP”——“NEW”——“BASE MAP”. 以此按照以上步骤,在弹 ...

  8. 生产环境Linux常用命令【随时更新】

    1. 查询文件中的关键字并高亮显示[查询当前目录关键字为elasticsearch的日志文件] find ./ -name "my-elasticsearch.log" | xar ...

  9. 关于苹果手机微信端 position: fixed定位top导航栏问题

    在移动端,position: fixed定位一般不被识别,或者在ios系统中,获取input焦点时,会导致position: fixed的top失效,下面是我验证过的方法,大家可以试试.<!do ...

  10. echarts图Y周坐标轴文字过长的解决方案

    解决方案  只贴出关键代码 在翻看echarts文档的过程中我看到了坐标轴文字可以自行定义模板,于是想到了我给一个固定12的字数限制,超出部分以省略号代替,这样就不会造成图形范围忽大忽小了. axis ...