如何在 URL 中添加参数？答案

【问题标题】：How to add a parameter to the URL?如何在 URL 中添加参数？
【发布时间】：2023-03-08 18:35:01
【问题描述】：

我目前的网址是：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

【问题讨论】：

有什么原因不能在服务器端生成链接或使用网络表单？
我同意@zzzzBov，那么你可以把你的最低价格过滤器变成一个动态链接。
我的网站上有太多过滤器，例如品牌名称、价格范围、按人气排序、按价格排序等等。在服务器端生成 URL 需要大量 if-else 语句，并且会在服务器上产生不必要的负载。我正在专门寻找客户端的 URL 更改。谢谢！
你不应该需要 if-else... PHP 有为此设计的函数。查看php.net/manual/en/function.http-build-query.php
@iSumitG，因为您可以使用您的$_GET 数组来填充具有必要值作为隐藏字段的网络表单，或者您可以使用http_build_query 构建一个新的查询字符串和@987654332 的副本@ 你设置了任何必要的新参数的地方。这个新查询可以转储到一个链接中。

标签： javascript url web-applications

【解决方案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);

【讨论】：

如果一个名为 mypriceMin 的参数已经是 location.href 的一部分，它也可能会被更改，因此请注意代码实际上是为它的目的工作的。此外，正则表达式应该只在搜索部分运行，而不是完整的 href。
@hakre 修复了“mypriceMin”问题 :) 仅针对搜索部分 - 是的，它在较短的字符串上会更有效，当然这不是最佳解决方案，任何人都可以根据自己的喜好进行调整跨度>
在下面添加了一个函数，它将实际比较规范化的参数名称，设置已经存在且没有值的参数并删除重复的参数。而且它只适用于搜索，不需要处理 URI 的其余部分。
我找到了另一个使用 search 而不是 href 的理由：尝试使用 test.html?a=b#filter - 添加到 location.href 确实会添加参数，甚至会添加到位置的错误部分。
@harke, true, location.hash 可能会导致问题，尽管我猜不是在我们这里的情况下，我们显然不打算使用它。另一方面..如果您要对您的应用程序进行 ajaxify 并将您的参数放入哈希中，并且您希望它在哈希更改时进行回调，您甚至可能希望在某些情况下通过这种方法调用来更改它。取决于您如何设计应用程序及其 url 处理

【解决方案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 已经提供了搜索字符串，剩下要做的就是将查询信息部分解析为名称和值对，更改或添加缺少的名称和值，然后将其添加回@987654327 @：

<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 标签，则可能会失败。

【讨论】：

谢谢，这个 setParam 函数真的很有用。有没有办法可以多次调用它来设置多个参数？

【解决方案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，但这不重要）。

【讨论】：

在您的示例中不需要if，完全相同的事情只能由location.search += "&priceMin=300"; 完成。
@hakre：很抱歉，if 用于区分? 和&。
这是多余的，因为您可以使用search，如果它还不是它的一部分，则不需要设置?。使用您的代码，您甚至可以将它添加到最后的哈希部分后面，正如我所看到的那样，尝试使用test.html?a=b#filter。
@hakre：我不知道可以设置location.search。谢谢。

【解决方案4】：

我用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;
}

希望能帮到你……

【讨论】：

【解决方案5】：

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

    location.href += newParams;
}

【讨论】：

【解决方案6】：

如果您让用户填写一个带有最低价格的文本字段，为什么不让表单作为 GET 请求和一个空白操作提交呢？ IIRC，应该做你想做的，没有任何 javascript。

【讨论】：

【解决方案7】：

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

【讨论】：

【解决方案8】：

使用var urlString = window.location获取网址

检查网址是否已经包含“？” urlString.indexOf('?')，-1 表示不存在。

设置window.location 重定向

这就像 101 的 javascript。尝试一些搜索引擎！

【讨论】：

【解决方案9】：

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

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

【讨论】：

他想要一个客户端 javascript，而不是服务器端