JavaScript改變URL參數(shù)方法詳解
Web瀏覽器中，URL參數(shù)或查詢參數(shù)是指在網(wǎng)址中的第一個(gè)問號(hào)之后的key-value參數(shù)對(duì)，例如：https://example.com?param1=value1¶m2=value2。URL參數(shù)是可選的，因?yàn)榭梢栽诜?wù)器端或通過JavaScript在客戶端進(jìn)行指定和解釋。下面是一些用于修改URL參數(shù)的JavaScript技巧和技術(shù)。
修改URL參數(shù)
我們可以使用JavaScript來修改URL參數(shù)，假設(shè)我們有以下網(wǎng)址：
https://example.com/page?foo=1&bar=2
我們可以使用以下代碼修改foo參數(shù)的值：
```htmlUpdate```
然后JavaScript代碼如下：
```javascript
function updateQueryStringParam(key, value) {
value = encodeURIComponent(value);
var url = window.location.href;
var re = new RegExp("([?&])" + key + "=.*?(&|#|$)(.*)", "gi"),
hash;
if (re.test(url)) {
if (typeof value !== 'undefined' && value !== null)
return url.replace(re, '$1' + key + "=" + value + '$2$3');
else {
hash = url.split('#');
url = hash[0].replace(re, '$1$3').replace(/(&|\?)$/, '');
if (typeof hash[1] !== 'undefined' && hash[1] !== null)
url += '#' + query[1];
return url;
}
} else {
if (typeof value !== 'undefined' && value !== null) {
var separator = url.indexOf('?') !== -1 ? '&' : '?',
hash = url.split('#');
url = hash[0] + separator + key + '=' + value;
if (typeof hash[1] !== 'undefined' && hash[1] !== null)
url += '#' + hash[1];
return url;
} else
return url;
}
}
```
這個(gè)函數(shù)將新的參數(shù)鍵值對(duì)添加到URL的末尾，或者更新現(xiàn)有的鍵值對(duì)。我們可以在HTML中使用onclick事件處理程序來調(diào)用這個(gè)函數(shù)。如果我們點(diǎn)擊“更新”，我們將會(huì)看到網(wǎng)址變成：
https://example.com/page?foo=3&bar=2
獲取URL參數(shù)
我們還可以使用JavaScript來獲取URL參數(shù)。對(duì)于上面的示例：
https://example.com/page?foo=1&bar=2
我們可以使用以下代碼來獲取foo參數(shù)的值：
```javascript
function getUrlParameter(parameter) {
const urlParams = new URLSearchParams(window.location.search);
return urlParams.get(parameter);
}
```
這將返回“1”。我們可以將它放入我們代碼的一個(gè)變量中：
```javascript
const foo = getUrlParameter('foo');
```
刪除URL參數(shù)
類似地，我們可以使用JavaScript來刪除URL參數(shù)。如果我們有以下網(wǎng)址：
https://example.com?param1=value1¶m2=value2
我們可以使用以下代碼刪除param1參數(shù)：
```htmlDelete```
然后JavaScript代碼如下：
```javascript
function deleteQueryStringParam(key) {
var searchParams = new URLSearchParams(window.location.search);
searchParams.delete(key);
location.search = searchParams.toString();
}
```
這個(gè)函數(shù)將從URL中刪除指定的參數(shù)，然后刷新頁面。我們可以在HTML中使用onclick事件處理程序來調(diào)用這個(gè)函數(shù)。如果我們點(diǎn)擊“刪除”，我們將看到網(wǎng)址變成：
https://example.com?param2=value2
總結(jié)
這些JavaScript示例做了以下事情：
- 修改URL參數(shù)：修改URL的鍵值對(duì)的值。
- 獲取URL參數(shù)：檢索URL參數(shù)的值，并在代碼中使用。
- 刪除URL參數(shù)：從URL中刪除指定的鍵值對(duì)。
這些技巧可以在使用JavaScript時(shí)訪問和解釋URL參數(shù)時(shí)非常有用。
上一篇java窗體和容器
下一篇python畫扇形教程