Question

我的表单上有一个下拉菜单，当选择某些内容时，我需要重新加载当前页面，但附加了查询字符串。

我将如何做到这一点？

Answer 1

这是一个老问题，但它首先出现在谷歌搜索结果中。

我使用的解决方案类似于jAndy的。

window.location.pathname为我提供了没有查询字符串的网页网址。然后，我可以使用"?"+$.param({'foo':'bar','base':'ball'})构建查询字符串，然后将其附加到路径名并设置为window.location.href。

window.location.href = window.location.pathname+"?"+$.param({'foo':'bar','base':'ball'})

Answer 2

var params = [
    "foo=bar",
    "base=ball"
];

window.location.href =
    "http://" +
    window.location.host +
    window.location.pathname +
    '?' + params.join('&');

change事件处理程序中的代码可以解决问题。

例如：

$('#my_dropdown_id').bind('change', function(){
    var params = [
        "foo=bar",
        "base=" + $(this).val()
    ];

    window.location.href = "http://" + window.location.host + window.location.pathname + '?' + params.join('&');
});

Answer 3

如果您使用评分最高的答案，则可能需要替换

http://

代码中的

window.location.protocol

这样它适用于其他协议，如https或文件。所以

window.location.href = window.location.protocol + "//" + window.location.host + window.location.pathname + '?' + params.join('&');

Answer 4

如果您想要一种非常简单的方法来保留查询字符串并可能附加到它，请使用window.location.search;这是一个片段：

var search = window.location.search + (window.location.search ? "&" : "?");
                search += "param1=foo&param2=bar";
                window.location.href = window.location.protocol + "//" + window.location.host + window.location.pathname + search;

当然，您可以使用更复杂的方法构建查询字符串的其余部分，如其他示例中所示，但关键是要利用Location.search。

Answer 5

如果您有一个现有的查询字符串，那么您希望保留此版本，并将您的新参数添加到任何现有的参数中。键被转换为小写，因此不会添加重复项。维护quersytring确实使解决方案更加复杂，所以我只在你需要的时候这样做。

$("#sortby").change(function () {

    var queryString = getQueryStrings();
    // Add new params to the querystring dictionary
    queryString["sortby"] = $("#sortby").val();

    window.location.href =
        window.location.protocol + "//" +
        window.location.host +
        window.location.pathname +
        createQueryString(queryString);
});


// http://stackoverflow.com/questions/2907482
// Gets Querystring from window.location and converts all keys to lowercase
function getQueryStrings() {
    var assoc = {};
    var decode = function (s) { return decodeURIComponent(s.replace(/\+/g, " ")); };
    var queryString = location.search.substring(1);
    var keyValues = queryString.split('&');

    for (var i in keyValues) {
        var key = keyValues[i].split('=');
        if (key.length > 1) {
            assoc[decode(key[0]).toLowerCase()] = decode(key[1]);
        }
    }

    return assoc;
}

function createQueryString(queryDict) {
    var queryStringBits = [];
    for (var key in queryDict) {
        if (queryDict.hasOwnProperty(key)) {
            queryStringBits.push(key + "=" + queryDict[key]);
        }
    }
    return queryStringBits.length > 0
        ? "?" + queryStringBits.join("&")
        : "";
}

Answer 6

我需要重新加载后打开特定的选项卡。因此，我只需要将＃tabs-4附加到当前网址即可。我知道它与当前职位无关，但是它可以像我一样帮助其他人。

使用代码

window.location = window.location.pathname 
            + window.location.search + '#tabs-4';

对我没用，但是下面的代码对我有用。

location = "#tabs-4";
location.reload(true);

Answer 7

其实有一个内置函数location可以使用，函数名是assign。

对于附加或修改，您也可以使用 URL 类的另一个内置函数。函数的名称是 searchParams。

因此，对于您的情况，您只需要以下示例：

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

location.assign(url.search);

jQuery / Javascript - 用附加的查询字符串重新加载当前页面？

7 个答案: