其實這是完全微不足道的,因爲JavaScript位置對象已經處理這個。只是封裝這個只有一行到功能與鏈接等重新使用它:
<script>
function addParam(v) {
window.location.search += '&' + v;
}
</script>
<a href="javascript:addParam('priceMin=300');">add priceMin=300</a>
沒有必要檢查?
,因爲這已經是search
一部分,你只需要添加帕拉姆。
如果你不想甚至使用功能的,你可以寫成這樣:
<a href="javascript:location.search+='&priceMin=300';">add priceMin=300</a>
請記住,這樣做你問什麼了:要添加特定的參數。它可能已經是search
部件的一部分,因爲您可以在URI中多次使用相同的參數。你可能想要在你的應用程序中規範化,但這是另一個領域。我會將URL歸一化集中到它自己的函數中。
編輯:
大約在公認的答案以上討論變得清晰,以下條件應滿足於得到一個工作功能:
- 如果參數已經存在,它應該被改變。
- 如果參數已經存在多次,只有更改後的副本才能存活。
- 如果參數已經存在,但沒有值,則應該設置該值。
由於search
已經提供的搜索字符串,唯一剩下實現的是該查詢信息部分解析爲名稱和值對,改變或添加缺少的名稱和值,然後添加回search
:
<script>
function setParam(name, value) {
var l = window.location;
/* build params */
var params = {};
var x = /(?:\??)([^=&?]+)=?([^&?]*)/g;
var s = l.search;
for(var r = x.exec(s); r; r = x.exec(s))
{
r[1] = decodeURIComponent(r[1]);
if (!r[2]) r[2] = '%%';
params[r[1]] = r[2];
}
/* set param */
params[name] = encodeURIComponent(value);
/* build search */
var search = [];
for(var i in params)
{
var p = encodeURIComponent(i);
var v = params[i];
if (v != '%%') p += '=' + v;
search.push(p);
}
search = search.join('&');
/* execute search */
l.search = search;
}
</script>
<a href="javascript:setParam('priceMin', 300);">add priceMin=300</a>
這至少是有點更強大的,因爲它可以處理的URL這樣的:
test.html?a?b&c&test=foo&priceMin=300
甚至:
test.html?a?b&c&test=foo&pri%63eMin=300
此外,添加的名稱和值始終正確編碼。如果這可能會失敗,如果參數名稱導致非法屬性js標籤。
任何原因,你不能生成鏈接服務器端或使用網頁表單? – zzzzBov
我同意@zzzzBov,那麼你可以把你的最低價格過濾器變成動態鏈接。 – iLLin
我的網站上有太多過濾器,比如品牌名稱,價格範圍,按受歡迎程度排序,按價格排序等等。要在服務器端生成URL需要很多'if-else'語句,並且會在服務器上生成不必要的負載。我特別在客戶端尋找URL更改。謝謝! –