欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

JS?中的URLSearchParams?對象操作(以對象的形式上傳參數(shù)到url)

 更新時(shí)間：2022年12月13日 15:26:28   作者：謝友海  
這篇文章主要介紹了JS中URLSearchParams的基本用法，本文結(jié)合示例代碼給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下

基本用法

此功能某些瀏覽器尚在開發(fā)中，兼容性可能不是很好。

URLSearchParams() 構(gòu)造器：創(chuàng)建并返回一個(gè)新的URLSearchParams 對象。 開頭的’?’ 字符會被忽略。

語法：

// init: 參數(shù)可選，為一個(gè) USVString
var URLSearchParams = new URLSearchParams(init);

示例：

// 傳入一個(gè)字符串字面值
var searchParams = new URLSearchParams('https://example.com?foo=1&bar=2');
console.log(searchParams.toString());	// foo=1&bar=2
// 查找字符串
console.log(searchParams.has('foo'));	// true
// 獲取字符串對應(yīng)的數(shù)據(jù)
console.log(searchParams.get('foo'));	// 1
// 設(shè)置字符串
searchParams.set('ttl','3');	// 1
console.log(searchParams.toString());	// foo=1&bar=2&ttl=3


// 傳入一個(gè) sequence
var params3 = new URLSearchParams([["foo", 1],["bar", 2]]);
console.log(params3.toString());	// foo=1&bar=2

// 傳入一個(gè) record
var params4 = new URLSearchParams({"foo" : 1 , "bar" : 2});
console.log(params4.toString());	// foo=1&bar=2

url的打印結(jié)果：

在這里插入圖片描述

實(shí)踐運(yùn)用

函數(shù)封裝：

export function toSearch(record: Record<string, string>) {
  return new URLSearchParams(record).toString();
}

使用

// Button 按鈕是adtd里面的，這里只展示局部代碼
<Button
  type="link"
  href={`#/project/flowpage?${toSearch({
    id: 666,
    name: "liu",
  })}`}
  target="_blank"
>
  點(diǎn)擊按鈕
</Button>

效果：

// 前面域名指向當(dāng)前網(wǎng)頁的域名，這里暫用...省略
...#/project/flowpage?id=666&name="liu"

到此這篇關(guān)于JS 中的URLSearchParams 對象操作(以對象的形式上傳參數(shù)到url)的文章就介紹到這了,更多相關(guān)JS URLSearchParams內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

相關(guān)文章

  • Bootstrap3 input輸入框插入glyphicon圖標(biāo)的方法

    Bootstrap3 input輸入框插入glyphicon圖標(biāo)的方法

    這篇文章主要介紹了Bootstrap3 input輸入框插入glyphicon圖標(biāo)的方法的相關(guān)資料,需要的朋友可以參考下
    2016-05-05
  • 微信小程序?qū)崿F(xiàn)自動定位功能

    微信小程序?qū)崿F(xiàn)自動定位功能

    這篇文章主要為大家詳細(xì)介紹了微信小程序?qū)崿F(xiàn)自動定位功能，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
    2018-10-10
  • 通過JavaScript實(shí)現(xiàn)圖片壓縮

    通過JavaScript實(shí)現(xiàn)圖片壓縮

    在學(xué)習(xí)的時(shí)候，有時(shí)候看到一些一些網(wǎng)站的圖片是經(jīng)過壓縮處理的，因?yàn)閴嚎s之后的圖片會節(jié)省一部分你的內(nèi)存空間，這樣的話也可以提升性能，于是就比較好奇這是如何實(shí)現(xiàn)的，今天我們就簡單的實(shí)現(xiàn)一下,需要的朋友可以參考下
    2023-06-06
  • JavaScript閉包原理與使用介紹

    JavaScript閉包原理與使用介紹

    閉包是js的一個(gè)難點(diǎn)也是它的一個(gè)特色,是我們必須掌握的js高級特性,下面這篇文章主要給大家介紹了關(guān)于JavaScript閉包函數(shù)的相關(guān)資料,需要的朋友可以參考下
    2022-10-10
  • JavaScript實(shí)現(xiàn)強(qiáng)制重定向至HTTPS頁面

    JavaScript實(shí)現(xiàn)強(qiáng)制重定向至HTTPS頁面

    這篇文章主要介紹了JavaScript實(shí)現(xiàn)強(qiáng)制重定向至HTTPS頁面,本文講解如何用JS實(shí)現(xiàn)HTTP重定向HTTPS或者HTTPS跳轉(zhuǎn)到HTTP,需要的朋友可以參考下
    2015-06-06
  • JavaScript對象與數(shù)組的幾種常見復(fù)制方法

    JavaScript對象與數(shù)組的幾種常見復(fù)制方法

    在 JavaScript 開發(fā)中,對象和數(shù)組的復(fù)制是一個(gè)非常常見的操作,無論是函數(shù)參數(shù)傳遞、狀態(tài)管理,還是避免不必要的副作用,了解和掌握各種復(fù)制方式至關(guān)重要,我們將系統(tǒng)梳理 JavaScript 中的幾種常見復(fù)制方法,并對其應(yīng)用場景進(jìn)行詳細(xì)說明,需要的朋友可以參考下
    2024-10-10
  • JS document form表單元素操作完整示例

    JS document form表單元素操作完整示例

    這篇文章主要介紹了JS document form表單元素操作,結(jié)合完整實(shí)例形式詳細(xì)分析了JavaScript form表單元素獲取、輸出、遍歷等相關(guān)操作技巧,需要的朋友可以參考下
    2020-01-01
  • SWFUpload多文件上傳及文件個(gè)數(shù)限制的方法

    SWFUpload多文件上傳及文件個(gè)數(shù)限制的方法

    這篇文章主要介紹了SWFUpload多文件上傳及文件個(gè)數(shù)限制的方法,較為詳細(xì)的分析了SWFUpload組件實(shí)現(xiàn)多文件上傳的原理、使用方法與相關(guān)注意事項(xiàng),需要的朋友可以參考下
    2016-05-05
  • JS分割字符串并放入數(shù)組的函數(shù)

    JS分割字符串并放入數(shù)組的函數(shù)

    JS分割字符串并放入數(shù)組的函數(shù)，需要的朋友可以參考下。
    2011-07-07
  • JS實(shí)現(xiàn)self的resend

    JS實(shí)現(xiàn)self的resend

    self中resend是調(diào)用“基類方法”的原語，它會把當(dāng)前接收到的消息原樣發(fā)送給其原型（parent*）。在ECMA-v5時(shí)代，我們終于可以做出這個(gè)偉大的東西了。
    2010-07-07

最新評論