2011-08-01 100 views
12

我現在的網址是:http://something.com/mobiles.php?brand=samsung如何向URL添加參數?

現在,當用戶點擊一個最低的價格過濾器(比如300),我希望我的URL成爲

http://something.com/mobiles.php?brand=samsung&priceMin=300

換句話說,我要尋找一個javascript函數,它將在當前URL中添加一個指定的參數,然後將網頁重定向到新的URL。

注:如果沒有設置參數,則函數應該添加的?代替&

也就是說,如果當前的URL是http://something.com/mobiles.php然後頁面應該被重新定向到http://something.com/mobiles.php?priceMin=300 而不是http://something.com/mobiles.php&priceMin=300

+1

任何原因,你不能生成鏈接服務器端或使用網頁表單? – zzzzBov

+0

我同意@zzzzBov,那麼你可以把你的最低價格過濾器變成動態鏈接。 – iLLin

+1

我的網站上有太多過濾器,比如品牌名稱,價格範圍,按受歡迎程度排序,按價格排序等等。要在服務器端生成URL需要很多'if-else'語句,並且會在服務器上生成不必要的負載。我特別在客戶端尋找URL更改。謝謝! –

回答

16

嘗試這樣的事情,也應該考慮情況下,當你已經在網址PARAM:

function addOrUpdateUrlParam(name, value) 
{ 
    var href = window.location.href; 
    var regex = new RegExp("[&\\?]" + name + "="); 
    if(regex.test(href)) 
    { 
    regex = new RegExp("([&\\?])" + name + "=\\d+"); 
    window.location.href = href.replace(regex, "$1" + name + "=" + value); 
    } 
    else 
    { 
    if(href.indexOf("?") > -1) 
     window.location.href = href + "&" + name + "=" + value; 
    else 
     window.location.href = href + "?" + name + "=" + value; 
    } 
} 

然後調用它像你的情況:

addOrUpdateUrlParam('priceMin', 300); 
+0

如果一個叫做'mypriceMin'已經放在location.href的部分參數,它可能會改變爲好,所以要小心的代碼實際上是工作了它的目的。此外,正則表達式應該只在搜索部分運行,而不是完整的href。 – hakre

+0

@hakre固定的「mypriceMin」的問題:)作爲唯一搜索的一部分 - 是的,那將是更短的字符串更高效,當然這不是最佳的解決方案,任何人都可以就調整自己的喜好添加 – petho

+0

下面,將實際的比較功能規範化的參數名稱,set的參數已經存在並且沒有值並刪除重複的參數。它僅適用於搜索,無需處理其餘的URI。 – hakre

4
if(location.search === "") { 
    location.href = location.href + "?priceMin=300"; 
} else { 
    location.href = location.href + "&priceMin=300"; 
} 

如果是location.search === "",則不存在?部分。

因此,添加?newpart,使它變成.php?newpart

否則有一個?部分已經。

因此,添加&newpart,以便它變成.php?existingpart&newpart


感謝hakre,你也可以簡單地把它想:

location.search += "&newpart"; 

它會自動添加必要?(如果看不出來的,它將使?&newpart這樣,但是這不應該物)。

+0

無需在你的榜樣了'if',同樣的事情可以做通過'location.search + =「&priceMin = 300」;'只。 – hakre

+0

@hakre:對不起,但'if'實際上可以區分'?'和'&'。 – pimvdb

+1

這是多餘的,因爲你可以使用'search',如果它不是它的一部分,不需要設置'?'。使用你的代碼,你甚至可以將它添加到最後的哈希部分後面,就像我看到的那樣,試着用'test.html?a = b#filter'。 – hakre

0

如果您讓用戶用最低價格填寫文本字段,爲什麼不讓表單作爲GET請求提交併帶有空白操作? IIRC,這應該做你想要的,沒有任何JavaScript。

0

使用var urlString = window.location,以便獲得url

檢查,如果網址已經包含一個 '?'與urlString.indexOf('?'),-1表示它不存在。

設置window.location重定向

這是如JavaScript 101。嘗試一些搜索引擎!

0
<FORM action="" method="get"> 
<P> 
<LABEL for="brand">Brand: </LABEL> 
      <INPUT type="text" id="brand"><BR> 
<LABEL for="priceMin">Minimum Price: </LABEL> 
      <INPUT type="text" id="priceMin"><BR> 
</P> 

1
var applyMinPrice = function(minPrice) { 
    var existingParams = (location.href.indexOf('?') !== -1), 
     separator = existingParams ? '&' : '?', 
     newParams = separator + 'priceMin=' + minPrice; 

    location.href += newParams; 
} 
13

其實這是完全微不足道的,因爲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標籤。

+0

謝謝,這個setParam函數真的很有用。有沒有辦法可以多次調用它來設置多個參數? – Alex

+0

謝謝完美! – sputn1k

0
<html> 
<body> 
.. 
.. 
.. 

<?php 
$priceMinValue= addslashes ($_GET['priceMin']); 
if (!empty($priceMin)) { 
     $link = "currentpage.php?priceMin=". $priceMinValue; 
     die("<script>location.href = '".$link. "'</script>");  
} 
?> 
</body> 
</html> 
+0

他想要一個客戶端的JavaScript,而不是服務器端 – JaMaBing

2

我重寫正確答案在PHP中:

function addOrUpdateUrlParam($name, $value){ 
$href = $_SERVER['REQUEST_URI']; 
$regex = '/[&\\?]' . $name . "=/"; 
if(preg_match($regex, $href)){ 
    $regex = '([&\\?])'.$name.'=\\d+'; 
    $link = preg_replace($regex, "$1" . $name . "=" . $value, $href); 
}else{ 
    if(strpos($href, '?')!=false){ 
     $link = $href . "&" . $name . "=" . $value; 
    }else{ 
     $link = $href . "?" . $name . "=" . $value; 
    } 
} 
return $link; 
} 

我希望幫助的人......