jQuery/Javascript - aktuelle Seite mit angehängtem Querystring neu laden?

Question

Ich habe ein Dropdown-Menü auf meinem Formular, das, wenn etwas ausgewählt ist, muss ich die aktuelle Seite neu laden, aber mit einem angehängten Querystring.

Wie würde ich das machen?

Answer 1

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

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

Dieser Code in Ihrem 10 Event-Handler wird den Trick tun.

Zum Beispiel:

$('#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

Dies ist eine alte Frage, aber es kam zuerst in Google Suchergebnissen.

Die Lösung, mit der ich ging, ist ähnlich wie bei Jandy.

window.location.pathname gibt mir die URL der Seite ohne die Abfragezeichenfolge. Ich bin dann in der Lage, den Abfrage-String mit "?"+$.param({'foo':'bar','base':'ball'}) zu erstellen, die ich dann an den Pfadnamen anfügen und auf window.location.href setzen.

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

Answer 3

Wenn Sie mit der am besten bewerteten Antwort gehen, können Sie

http:// 

im Code mit

window.location.protocol 

ersetzt werden soll, so dass es auch für andere Protokolle arbeitet, wie https oder Datei. So

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

Answer 4

Wenn Sie eine vorhandene Abfragezeichenfolgeflag, die Sie behalten möchten, dann ist diese Version das tut und fügt Ihrem neuen params auf alle bestehenden. Die Schlüssel werden in Kleinbuchstaben konvertiert, sodass keine Duplikate hinzugefügt werden. Das Warten des Quersystrings macht die Lösung komplizierter, also würde ich das nur tun, wenn es nötig ist.

$("#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

Wenn Sie eine wirklich einfache Möglichkeit, das Query-String zu erhalten und möglicherweise anhängen, verwenden window.location.search; Hier ist ein Ausschnitt:

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; 

können Sie, natürlich, eine anspruchsvollere Art und Weise des Aufbaus der Rest Ihrer Query-String verwenden, wie in den anderen Beispielen gefunden, aber der Schlüssel ist Location.search zu nutzen.