如何在URL中添加参数？

Question

我目前的网址是: http://something.com/mobiles.php?brand=samsung

现在,当用户点击最低价格过滤器(比如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

Answer 1

尝试这样的事情,它应该考虑你已经在url中的那个参数的情况:

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);

Answer 2

实际上这完全是微不足道的,因为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已经提供了搜索字符串,唯一要做的就是将query-info部分解析为名称和值对,更改或添加缺少的名称和值,然后将其添加回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标签,则可能失败的地方.

Answer 3

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这种方式进行,但这应该无关紧要).