快捷導(dǎo)航

前端url拼接參數(shù)格式&?用&和??=拼接方法實(shí)例

更新時(shí)間：2023年02月07日 10:10:17 作者：桃花郎

在一些情況下需要直接往url上拼接請(qǐng)求參數(shù),下面這篇文章主要給大家介紹了關(guān)于前端url拼接參數(shù)格式&?用&和??=拼接的相關(guān)資料,文中通過(guò)實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下

首先在一些情況下，往url上拼接請(qǐng)求參數(shù)

【?】開頭

【&】開頭

【=】參數(shù)值

1.如何直接往url上拼接請(qǐng)求參數(shù)

通過(guò)下面的例子可以看出，第一個(gè)參數(shù)需要以【?】開頭，然后是參數(shù)名，然后是【=】，然后是參數(shù)值。

第一個(gè)參數(shù)：需要以【?】開頭，然后是參數(shù)名。

http://www.taohua.com?age=1

下面是第二個(gè)參數(shù)的拼接開始則需要以【&】開頭，然后是參數(shù)名，然后是【=】，然后是參數(shù)值。

第二個(gè)參數(shù) ：開始需要以【?】開頭，然后是參數(shù)名，第二個(gè)以【&】開頭，然后是參數(shù)名。

http://www.桃花.com?box=arr&anme='桃花'&age=18

這就是url拼接參數(shù)的格式要求。

另一種理解就是，當(dāng)需要往url上拼接請(qǐng)求參數(shù)的時(shí)候，需要以【?】作為分隔符，在【?】分隔符的右邊開始拼接參數(shù)對(duì)，參數(shù)對(duì)的格式是【參數(shù)名=參數(shù)值】，不同參數(shù)對(duì)之間以【&】作為分隔符。

2.js 地址欄url 傳一個(gè)參數(shù)和多個(gè)參數(shù)時(shí)拼接方法：

//動(dòng)態(tài)設(shè)置當(dāng)參數(shù)傳進(jìn)去

let ipaddr = "192.162.1.1.....";
let path = "/arrg/box";
let url   = "http://" + ipaddr +path ;
console.log(url);// http://192.168.1.1..../arrg/box"

//?拼接一個(gè)參數(shù)

let ipaddr = "192.162.1.1.....";
let path = "/arrg/box";
let url   = "http://" + ipaddr +path ;
let getTimestamps = new Date().getTime();//時(shí)間戳
let url= "http://" + ipaddr + path + "?timestamps=" + getTimestamps;
console.log(url);//http://192.168.1.1..../arrg/box?timestamps=16082771588

//兩個(gè)參數(shù)拼接時(shí)用 & 連接

let ipaddr = "192.162.1.1.....";
let path = "/arrg/box";
let url= "http://" + ipaddr + path + "?timestamps=" + getTimestamps;
let value = 0;
let url2 = "http://" + ipaddr + path + "?value=" + v + "&timestamps=" + getTimestamps;
console.log(url2);// http://192.168.1.1..../arrg/box?value=0&timestamps=16082771588

補(bǔ)充知識(shí)：url獲取?后面所有拼接的參數(shù)

在頁(yè)面?zhèn)髦档臅r(shí)候,經(jīng)常使用到方法就是url后面通過(guò)?拼接參數(shù),再結(jié)合&可以實(shí)現(xiàn)多個(gè)參數(shù)的傳遞,例如

http://www.test.com?a=123&b=xyz&b=456

傳參不難,只需要按照格式拼接起來(lái),難點(diǎn)在于如何獲取拼接好的參數(shù),以上面為例,也就是獲取?a=123&b=xyz&c=456這部分內(nèi)容

使用window.location.search！對(duì)，原生的這個(gè)api可以獲取到?以及后面的參數(shù)值，但是不友好的地方在于獲取的是字符串，給我們這么一坨東西沒(méi)用啊，我們需要的東西在這字符串之中，所以我們需要處理一下這個(gè)字符串，處理成什么格式做好用呢？對(duì)象！

因?yàn)樵趈s中，萬(wàn)物皆對(duì)象~這里就給大家羅列兩種方法（當(dāng)然不止兩種，還有很多方式可以處理，找到一兩種好理解，好記憶，靈活處理各種問(wèn)題的方法才是硬道理）

推薦方法

使用replace()和queryString.parse();

replace()方法可以使用其他的代替,目的是去掉字符串中的?

// http://www.test.com?a=123&b=xyz&b=456
//先引入
import queryString from 'querystring';
 
const url=window.location.search;
const data=url.replace('?', '');
const param = queryString.parse(data);
 
//最后結(jié)果
param = {
    a:'123',
    b:['xyz','456']
}
 
//合并
const param= queryString.parse(url.replace('?', ''));