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

jQuery/Javascript - reload current page with an appended querystring?

提问by Probocop

I've got a dropdown menu on my form, which when something is selected I need to reload the current page, but with an appended querystring.

我的表单上有一个下拉菜单，它在选择某些东西时，我需要重新加载当前页面，但是使用已附加的QueryString。

How would I go about doing this?

我该怎么做呢？

回答by jgreen

This is an old question but it came up first in google search results.

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

The solution I went with is similar to jAndy's.

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

window.location.pathnamegives me the page's url without the query string. I'm then able to build the query string with "?"+$.param({'foo':'bar','base':'ball'})which I then append to the pathname and set to window.location.href.

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

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

回答by jAndy

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

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

That code within your changeevent handler will do the trick.

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

For instance:

例如：

$('#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('&');
});

回答by broetchen

If you go with the top rated answer, you may want to replace

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

http://

in the code with

在代码中

window.location.protocol

so that it works for other protocols, like https or file. So

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

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

回答by Tom Auger

If you want a really simple way to preserve the query string and possibly append to it, use window.location.search; here's a snippet:

如果您想要一种非常简单的方法来保留查询字符串并可能附加到它，请使用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;

You can, of course, use a more sophisticated way of building the rest of your query string, as found in the other examples, but the key is to leverage Location.search.

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

回答by A_01

I was having a requirement to open a particular tab after reloading. So I just needed to append the #tabs-4 to the current url. I know its irrelevant to current post but it could help others who come to this just like I did.

我需要在重新加载后打开特定选项卡。所以我只需要将 #tabs-4 附加到当前的 url。我知道它与当前帖子无关，但它可以帮助像我一样来到这里的其他人。

Using the code

使用代码

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

did'nt work for me but below code did.

没有为我工作，但下面的代码做了。

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

回答by Richard Garside

If you have an existing querystring that you'd like to keep then this version does that and adds your new params to any existing ones. The keys are converted to lowercase so that duplicates are not added. Maintaining the quersytring does make the solution more complicated, so I'd only do this if you need to.

如果您有一个想要保留的现有查询字符串，那么此版本会执行此操作并将您的新参数添加到任何现有参数中。键被转换为小写，以便不添加重复项。维护 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("&")
        : "";
}