附加到 URL 并刷新页面

我希望写一段 javascript,将附加一个参数到当前的 URL,然后刷新页面-我如何做到这一点?

305997 次浏览
location.href = location.href + "&parameter=" + value;

这个应该可以(不是测试!)

var url = window.location.href;
if (url.indexOf('?') > -1){
url += '&param=1'
}else{
url += '?param=1'
}
window.location.href = url;
function gotoItem( item ){
var url = window.location.href;
var separator = (url.indexOf('?') > -1) ? "&" : "?";
var qs = "item=" + encodeURIComponent(item);
window.location.href = url + separator + qs;
}

更轻便的版本

function gotoItem( item ){
var url = window.location.href;
url += (url.indexOf('?') > -1)?"&":"?" + "item=" + encodeURIComponent(item);
window.location.href = url;
}

比公认的答案短,做同样的事,但保持简单:

window.location.search += '&param=42';

我们不需要修改整个 url,只需要修改查询字符串(称为 location 的 search 属性)。

当为搜索属性分配值时,浏览器会自动插入问号并重新加载页面。

这里的大多数答案都建议在 URL 后面添加参数,比如下面的片段或者类似的变体:

location.href = location.href + "&parameter=" + value;

这在大多数情况下都会起到很好的作用。

然而

在我看来,这不是将参数附加到 URL 的正确方法。

因为建议的方法不测试参数是否已经在 URL 中设置,如果不小心,可能会导致同一参数重复多次的非常长的 URL。即:

https://stackoverflow.com/?&param=1&param=1&param=1&param=1&param=1&param=1&param=1&param=1&param=1

就是问题开始的地方。建议的方法可以并且将在多次页面刷新后创建一个非常长的 URL,从而使 URL 无效。有关长 URL 在不同的浏览器中,URL 的最大长度是多少?的更多信息,请点击这个链接

这是我建议的方法:

function URL_add_parameter(url, param, value){
var hash       = {};
var parser     = document.createElement('a');


parser.href    = url;


var parameters = parser.search.split(/\?|&/);


for(var i=0; i < parameters.length; i++) {
if(!parameters[i])
continue;


var ary      = parameters[i].split('=');
hash[ary[0]] = ary[1];
}


hash[param] = value;


var list = [];
Object.keys(hash).forEach(function (key) {
list.push(key + '=' + hash[key]);
});


parser.search = '?' + list.join('&');
return parser.href;
}

有了这个函数,我们只需要执行以下操作:

location.href = URL_add_parameter(location.href, 'param', 'value');

请检查以下代码:

/*Get current URL*/
var _url = location.href;
/*Check if the url already contains ?, if yes append the parameter, else add the parameter*/
_url = ( _url.indexOf('?') !== -1 ) ? _url+'&param='+value : _url+'?param='+value;
/*reload the page */
window.location.href = _url;

上面@yeyo 的深思熟虑的回答的一个小错误修正。

改变:

var parameters = parser.search.split(/\?|&/);

致:

var parameters = parser.search.split(/\?|&amp;/);

试试这个

var url = ApiUrl(`/customers`);
if(data){
url += '?search='+data;
}
else
{
url +=  `?page=${page}&per_page=${perpage}`;
}
console.log(url);

另外:

window.location.href += (window.location.href.indexOf('?') > -1 ? '&' : '?') + 'param=1'

只有一行 Shlomi 答案可用于书签

这行 JS 代码获取不带参数的链接(即在 '?'之前) ,然后将参数附加到该链接。

window.location.href = (window.location.href.split('?')[0]) + "?p1=ABC&p2=XYZ";

上面的代码行附加了两个参数 p1p2,它们的值分别是 'ABC''XYZ'(以便更好地理解)。

如果你正在开发一个现代的浏览器 ,不要自己解析 url 参数-您可以使用内置的 URL函数来完成这项工作如下:

const parser = new URL(url || window.location);
parser.searchParams.set(key, value);
window.location = parser.href;