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。