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. 【转】C++ const 关键字总结

    const是一个C++语言的限定符,它限定一个变量不允许被改变.使用const在一定程度上可以提高程序的安全性和可靠性.另外,在观看别人代码的时候,清晰理解const所起的作用,对理解对方的程序也有一 ...

  2. [SHOI2014]概率充电器(概率+换根dp)

    著名的电子产品品牌SHOI 刚刚发布了引领世界潮流的下一代电子产品—— 概率充电器: “采用全新纳米级加工技术,实现元件与导线能否通电完全由真随机数决 定!SHOI 概率充电器,您生活不可或缺的必需品 ...

  3. nodejs的某些api~(五) HTTP模块

    HTTP的模块是nodejs最重要的模块(应该是),最近在看HTTP权威指南,重新过了一遍http协议和web客户端.再来看这个http. HTTP构建于TCP之上,属于应用层协议,继承自tcp服务器 ...

  4. (转)java 序列化ID的作用

    序列化ID的作用: 其实,这个序列化ID起着关键的作用,它决定着是否能够成功反序列化!简单来说,java的序列化机制是通过在运行时判断类的serialVersionUID来验证版本一致性的.在进行反序 ...

  5. win32: WM_PAINT 实现双缓冲缓图

    相关参考资料: GDI下实现双缓冲 - http://jingyan.baidu.com/article/e73e26c0f8df2424acb6a76e.html <Win32_19>用 ...

  6. react-native中的图片

    静态图片资源 React Native 提供了一个统一的方式来管理 iOS 和 Android 应用中的图片.要往 App 中添加一个静态图片, 只需把图片文件放在代码文件夹中某处,然后像下面这样去引 ...

  7. golang与vscode的安装与配置

    一.golang的下载与安装 以下都是win10的安装与配置 go语言官方下载地址:https://golang.org/dl/ 找到适合你系统的版本下载 傻瓜式安装开始... 二.golang环境变 ...

  8. 《Java程序设计》 第一周学习总结

    20175313 <Java程序设计>第一周学习总结 教材学习内容总结 了解Java的四个特点 学习JDK的安装以及系统环境变量的设置 掌握Java源文件命名.编译.运行 熟悉git的常用 ...

  9. jenkins学习:jenkins的基本配置

    _(:з)∠)_,发现写了gitlab和maven ,但是jenkins的详细步骤没有. 这里整理一下. 1.下载jenkins的war包,无需FQ. 网址:https://jenkins.io/do ...

  10. 论文总结(Frequent Itemsets Mining With Differential Privacy Over Large-Scale Data)

    一.论文目标:将差分隐私和频繁项集挖掘结合,主要针对大规模数据. 二.论文的整体思路: 1)预处理阶段: 对于大的数据集,进行采样得到采样数据集并计算频繁项集,估计样本数据集最大长度限制,然后再缩小源 ...