添加/更改URL的参数并重定向到新URL

时间:2012-10-25 07:41:14

标签: javascript jquery append

如果URL中不存在&view-all参数,我需要将其与值一起添加到URL的末尾。如果它存在,那么我需要能够在不创建新URL的情况下更改值,因为它可能会或可能不会在其之前有其他参数。

我找到了这个功能,但我无法让它工作:https://stackoverflow.com/a/10997390/837705

以下是我使用上述功能的代码(我无法开始工作):http://jsfiddle.net/Draven/tTPYL/4/

我知道如何附加参数和值:

<div onclick="javascript: window.location.assign(window.location.href+='&view-all=Yes');">Blah Blah</div>

更多信息:

如果网址为http://www.domain.com/index.php?action=my_action,则默认的“&amp; view-all”值为“是”,因此点击按钮时定向到的网址为http://www.domain.com/index.php?action=my_action&view-all=Yes

如果网址为http://www.domain.com/index.php?action=my_action&view-all=Yes,那么当他们点击按钮时,它会更改为http://www.domain.com/index.php?action=my_action&view-all=No​​​

编辑:请举例说明。我不知道很多JS,我只是想不出用PHP做的方法。

13 个答案:

答案 0 :(得分:60)

function setGetParameter(paramName, paramValue)
{
    var url = window.location.href;
    var hash = location.hash;
    url = url.replace(hash, '');
    if (url.indexOf(paramName + "=") >= 0)
    {
        var prefix = url.substring(0, url.indexOf(paramName));
        var suffix = url.substring(url.indexOf(paramName));
        suffix = suffix.substring(suffix.indexOf("=") + 1);
        suffix = (suffix.indexOf("&") >= 0) ? suffix.substring(suffix.indexOf("&")) : "";
        url = prefix + paramName + "=" + paramValue + suffix;
    }
    else
    {
    if (url.indexOf("?") < 0)
        url += "?" + paramName + "=" + paramValue;
    else
        url += "&" + paramName + "=" + paramValue;
    }
    window.location.href = url + hash;
}

在你的onclick事件中调用上面的函数。

答案 1 :(得分:4)

所有临时解决方案都没有考虑参数中子字符串的可能性。例如,http://xyz?ca=1&a=2不会选择参数a但是ca.这是一个通过参数并检查它们的函数。

function setGetParameter(paramName, paramValue)
{
  var url = window.location.href;
  var hash = location.hash;
  url = url.replace(hash, '');
  if (url.indexOf("?") >= 0)
  {
    var params = url.substring(url.indexOf("?") + 1).split("&");
    var paramFound = false;
    params.forEach(function(param, index) {
      var p = param.split("=");
      if (p[0] == paramName) {
        params[index] = paramName + "=" + paramValue;
        paramFound = true;
      } 
    });
    if (!paramFound) params.push(paramName + "=" + paramValue);
    url = url.substring(0, url.indexOf("?")+1) + params.join("&");
  }
  else
    url += "?" + paramName + "=" + paramValue;
  window.location.href = url + hash;
}

答案 2 :(得分:3)

我有类似的情况,我想替换URL查询参数。但是,我只有一个参数,我可以简单地替换它:

window.location.search = '?filter=' + my_filter_value

location.search property允许您获取或设置网址的查询部分。

答案 3 :(得分:2)

虽然我从输入中获取了网址,但它很容易调整到真实网址。

var value = 0;

$('#check').click(function()
{
    var originalURL = $('#test').val();
    var exists = originalURL.indexOf('&view-all');

    if(exists === -1)
    {
        $('#test').val(originalURL + '&view-all=value' + value++);
    }
    else
    {
        $('#test').val(originalURL.substr(0, exists + 15) + value++);
    }
});

http://jsfiddle.net/8YPh9/31/

答案 4 :(得分:1)

在PHP中执行此操作:您有几个参数可以查看您的页面,我们可以说actionview-all。您可能(可能)已使用$action = $_GET['action']或其他任何内容访问这些内容,可能会设置默认值。

然后,如果您想要像$viewAll = $viewAll == 'Yes' ? 'No' : 'Yes'那样切换变量,那么您可以根据需要决定。

最后,您只需再次使用这些值构建网址,如

$clickUrl = $_SERVER['PHP_SELF'] . '?action=' . $action . '&view-all=' . $viewAll;

就是这样。

所以你依赖于页面状态而不是用户url(因为你可能会稍后决定$ viewAll是默认的或是什么)。

答案 5 :(得分:1)

一些简单的想法让你前进:

在PHP中你可以这样做:

if (!array_key_exists(explode('=', explode('&', $_GET))) {
  /* add the view-all bit here */
}

在javascript中:

if(!location.search.match(/view\-all=/)) {
  location.href = location.href + '&view-all=Yes';
}

答案 6 :(得分:1)

我觉得这样的事情会起作用,升级@Marc代码:

//view-all parameter does NOT exist  
$params = $_GET;  
if(!isset($_GET['view-all'])){  
  //Adding view-all parameter  
  $params['view-all'] = 'Yes';  
}  
else{  
  //view-all parameter does exist!  
  $params['view-all'] = ($params['view-all'] == 'Yes' ? 'No' : 'Yes');  
}
$new_url = $_SERVER['PHP_SELF'].'?'.http_build_query($params);

答案 7 :(得分:1)

这是实现这一目标的一种方式。它采用参数名称和参数值,以及可选的“清除”。如果你提供clear = true,它将删除所有其他参数并且只保留新添加的参数 - 在其他情况下,它将用new替换原始,或者如果查询字符串中不存在则添加它。

这是从最初的答案中修改的,因为如果它替换了除最后一个值之外的任何内容,那么它就会破坏。这适用于任何值,并保留现有订单。

function setGetParameter(paramName, paramValue, clear)
{
clear = typeof clear !== 'undefined' ? clear : false;
var url = window.location.href;
var queryString = location.search.substring(1); 
var newQueryString = "";
if (clear)
{
    newQueryString = paramName + "=" + paramValue;
}
else if (url.indexOf(paramName + "=") >= 0)
{
    var decode = function (s) { return decodeURIComponent(s.replace(/\+/g, " ")); };
    var keyValues = queryString.split('&'); 
    for(var i in keyValues) { 
        var key = keyValues[i].split('=');
        if (key.length > 1) {
            if(newQueryString.length > 0) {newQueryString += "&";}
            if(decode(key[0]) == paramName)
            {
                newQueryString += key[0] + "=" + encodeURIComponent(paramValue);;
            }
            else
            {
                newQueryString += key[0] + "=" + key[1];
            }
        }
    } 
}
else
{
    if (url.indexOf("?") < 0)
        newQueryString = "?" + paramName + "=" + paramValue;
    else
        newQueryString = queryString + "&" + paramName + "=" + paramValue;
}
window.location.href = window.location.href.split('?')[0] + "?" + newQueryString;
}

答案 8 :(得分:1)

我建议稍微改变@ Lajos的答案......在我的特殊情况下,我可能会有一个哈希作为url的一部分,这将导致解析我们在此方法之后使用此方法插入的参数的问题重定向。

function setGetParameter(paramName, paramValue) {
    var url = window.location.href.replace(window.location.hash, '');
    if (url.indexOf(paramName + "=") >= 0) {
        var prefix = url.substring(0, url.indexOf(paramName));
        var suffix = url.substring(url.indexOf(paramName));
        suffix = suffix.substring(suffix.indexOf("=") + 1);
        suffix = (suffix.indexOf("&") >= 0) ? suffix.substring(suffix.indexOf("&")) : "";
        url = prefix + paramName + "=" + paramValue + suffix;
    }else {
        if (url.indexOf("?") < 0)
            url += "?" + paramName + "=" + paramValue;
        else
            url += "&" + paramName + "=" + paramValue;
    }
    url += window.location.hash;
    window.location.href = url;
}

答案 9 :(得分:0)

这是我用JS

重建url查询字符串的示例代码

//function get current parameters
$.urlParam = function(name){
    var results = new RegExp('[\?&]' + name + '=([^&#]*)').exec(window.location.href);
    if (results==null){
        return null;
    }
    else{
        return results[1] || 0;
    }
};

//build a new parameters
var param1 = $.urlParam('param1');
var param2 = $.urlParam('param2');

//check and create an array to save parameters
var params = {};
    if (param1 != null) {
        params['param1'] = param1;
    }
    if (order != null) {
        params['param2'] = param2;
    }

//build a new url with new parameters using jQuery param
window.location.href =  window.location.origin + window.location.pathname + '?' + $.param(params);

我使用了JQUERY param:http://api.jquery.com/jquery.param/来创建一个包含新参数的新网址。

答案 10 :(得分:0)

我需要帮助来调整下面的脚本,或者找到一个可以在我的wordpress网站上使用的脚本,以从正向网址中获取网址后缀参数,然后将其添加到按钮的点击网址中,以跟踪正确的正向广告ID。

原因:即使用户通过单击按钮从optin页面跳至销售页面,参数也可用于广告跟踪,以找出用户从哪个广告中转发了该广告。

要达到的目标是: 1. FB广告指向带有跟踪代码https://ownsite.com/optin-page/?tid=fbad1的optin页面 2.在optin页面上,有一个带有设置URL的按钮可转发到销售页面,但是如果单击该按钮,则仅URL是转发的,但是缺少参数“?tid = fbad1”。 3.下面的自动转发脚本(正常工作)可用于更改按钮的单击前进,但有一个局限性,因为它只能捕获“ tid”参数,而不能同时捕获utm参数。

因此,应实施脚本代码来建立单击按钮(也可以对其进行样式设置或使用图像),并在单击按钮的同时抓住当前后继页面的后缀参数以前进至其他销售页面,然后进行转发到还包含UTM参数的销售页面https://ownsite.com/sales-page/?tid=fbad1

当前,我可以使用自动重定向脚本解决此问题,但是 答:)我不想在此页面上使用自动重定向。更好的是使用事件单击按钮,让用户自己单击以包含URL参数进行转发。 B.)此脚本中的跟踪ID参数仅限于“?tid = ...”,我也想跟踪按钮单击时的UTM代码 即从当前页面抓取URL https://www.optin-page.com/?tid=facebookad1?utm_campaign=blogpost的参数,然后在按钮上单击抓取参数并添加到按钮集URL https://www.sales-page.com/?tid=facebookad1?utm_campaign=blogpost

现在请在此处找到以下用于自动重定向和获取URL参数的代码。现在应更改此代码,以便能够创建一个带有单击事件的按钮,如果单击该按钮,则该按钮将被重定向到带有当前URL参数的转发URL(如上所述)。

    <p><!-- Modify this according to your requirement - core script from https://gist.github.com/Joel-James/62d98e8cb3a1b6b05102 and suffix grabbing </p>
    <h3 style="text-align: center;"><span style="color: #ffffff; background-color: #039e00;">►Auto-redirecting after <span id="countdown">35</span> seconds◄</span></h3>
    <p><!-- JavaScript part --><br /><script type="text/javascript">

function findGetParameter(parameterName) {
    var result = null,
        tmp = [];
    location.search
        .substr(1)
        .split("&")
        .forEach(function (item) {
          tmp = item.split("=");
          if (tmp[0] === parameterName) result = decodeURIComponent(tmp[1]);
        });
    return result;
}


    // Total seconds to wait
    var seconds = 45;

    function countdown() {
        seconds = seconds - 1;
        if (seconds < 0) {
            // Chnage your redirection link here
var tid = findGetParameter('tid');
window.location = "https://www.2share.info/ql-cb2/" + '?tid='+tid;
        } else {
            // Update remaining seconds
            document.getElementById("countdown").innerHTML = seconds;
            // Count down using javascript
            window.setTimeout("countdown()", 1000);
        }
    }

    // Run countdown function
    countdown();

</script></p>

答案 11 :(得分:0)

var updateQueryStringParameter = function (key, value) {

    var baseUrl = [location.protocol, '//', location.host, location.pathname].join(''),
        urlQueryString = document.location.search,
        newParam = key + '=' + value,
        params = '?' + newParam;

    // If the "search" string exists, then build params from it
    if (urlQueryString) {
        var updateRegex = new RegExp('([\?&])' + key + '[^&]*');
        var removeRegex = new RegExp('([\?&])' + key + '=[^&;]+[&;]?');

        if( typeof value == 'undefined' || value == null || value == '' ) { 
            params = urlQueryString.replace(removeRegex, "$1");
            params = params.replace( /[&;]$/, "" );

        } else if (urlQueryString.match(updateRegex) !== null) { 
            params = urlQueryString.replace(updateRegex, "$1" + newParam);

        } else {
            params = urlQueryString + '&' + newParam;
        }
    }

    // no parameter was set so we don't need the question mark
    params = params == '?' ? '' : params;

    window.history.replaceState({}, "", baseUrl + params);
};

答案 12 :(得分:0)

为什么可以让浏览器为您自己解析查询字符串?

function changeQS(key, value) {
    let urlParams = new URLSearchParams(location.search.substr(1));
    urlParams.set(key, value);
    location.search = urlParams.toString();
}