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

Question

我在窗体上有一个下拉菜单，当选择了某些东西的时候，我需要重新加载当前页面，但是添加了查询字符串。

我该怎么做呢？

Answer 1

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 2

这是一个老问题，但它在谷歌搜索结果中第一个走了过来。

我去的解决方案与jAndy的相似。

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

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

Answer 3

如果用最精彩的答案去，你可能要与

window.location.protocol 

更换

http:// 

的代码，以便它适用于其他协议，如HTTPS或文件。所以

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

Answer 4

如果你有一个现有的查询字符串，你想保持那么这个版本确实是，并增加了新的PARAMS任何现有的。密钥被转换为小写字母，因此不会添加重复项。维护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 5

如果你想有一个非常简单的方法来保存查询字符串，并可能追加到它，使用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。