Javascript 如何向URL添加参数？_Javascript_Url_Web Applications

Javascript 如何向URL添加参数？

javascript url web-applications

Javascript 如何向URL添加参数？,javascript,url,web-applications,Javascript,Url,Web Applications,我当前的URL是：http://something.com/mobiles.php?brand=samsung 现在，当用户点击最低价格过滤器（比如300）时，我希望我的URL变成 http://something.com/mobiles.php?brand=samsung&priceMin=300 if(location.search === "") { location.href = location.href + "?priceMin=300"; } else { loca

我当前的URL是：

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

现在，当用户点击最低价格过滤器（比如300）时，我希望我的URL变成

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

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

换句话说，我正在寻找一个javascript函数，它将在当前URL中添加一个指定的参数，然后将网页重新定向到新的URL

注意：如果未设置任何参数，则函数应添加

？

，而不是

i、 e.如果当前URL为

http://something.com/mobiles.php

然后页面应重新指向

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

而不是

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

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

，但这并不重要）。

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

使用

var urlString=window.location

获取url

检查url是否已包含带有

urlString的“？”。indexOf（“？”）

，-1表示它不存在

将

窗口位置设置为重定向
这就像101个javascript。试试搜索引擎吧
 
<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>


品牌：


最低价格：




 尝试类似的东西，也应该考虑在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);

实际上，这完全是微不足道的，因为javascript位置对象已经处理了这个问题。只需将这一行程序封装到一个函数中，即可将其与链接等一起重复使用：
<script>
    function addParam(v) {
        window.location.search += '&' + v;
    }
</script>

<a href="javascript:addParam('priceMin=300');">add priceMin=300</a>

请记住，这正是您所要求的：添加特定参数。它可能已经是搜索部分的一部分，因为您可以在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>

甚至：
test.html?a?b&c&test=foo&pri%63eMin=300

此外，添加的名称和值始终正确编码。如果参数名导致非法的属性js标签，则可能会失败。

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

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

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

我希望帮助的人…
有什么原因你不能在服务器端生成链接或使用网络表单吗？我同意@zzzzBov，然后你可以将你的最低价格过滤器变成动态链接。我的网站上有太多的过滤器，如品牌名称、价格范围、受欢迎程度排序、价格排序等。要在服务器端生成URL，需要大量的if-else
语句，并且会在服务器上生成不必要的负载。我特别寻找在客户端的URL更改。谢谢你不应该需要别的。。。PHP有专门为此设计的函数。请查看@iSumitG，因为您可以使用$\u GET
数组将必要的值作为隐藏字段填充到Web表单中，或者您可以使用http\u build\u query
和$\u GET
的副本构建一个新的查询字符串，其中设置了任何必要的新参数。此新查询可以转储到链接中。如果名为mypriceMin
的参数已经是location.href的一部分，它也可能会被更改，因此请注意代码实际上是为它的目的工作的。此外，正则表达式应该只在搜索部分运行，而不是在完整的href上运行。@hakre修复了“mypriceMin”问题：）至于只在搜索部分-是的，它在较短的字符串上更有效，当然这不是最佳解决方案，任何人都可以根据自己的喜好调整它。下面添加了一个函数，该函数将实际比较规范化的参数名称，设置已存在且没有值的参数，并删除重复的参数。它只适用于搜索，不需要处理URI的其余部分。我找到了另一个使用search
而不是href
的原因：尝试使用test.html？a=b#filter
-添加到location.href确实会将参数添加到位置的错误部分。@harke，true，location.hash可能会导致一些东西，虽然我猜不是在我们这里的情况下，我们显然没有计划使用它。另一方面如果你想让你的应用程序ajaxify，把你的参数放在散列中，当散列改变时，你想让它做回调，你甚至可以在某些情况下通过这种方法调用来改变它。取决于您如何设计应用程序及其url处理在您的示例中，不需要if
，同样的事情也可以通过location.search+=“&priceMin=300”仅限”。@hakre:很抱歉，if是用来区分
<html>
<body>
..
..
..

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

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