jQuery/Javascript - Recharger la page actuelle avec une chaîne de requête attachée?

Question

J'ai un menu déroulant sur mon formulaire, qui, quand quelque chose est sélectionné, j'ai besoin de recharger la page en cours, mais avec une chaîne de requête attachée.

Comment ferais-je cela?

Answer 1

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

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

Ce code au sein de votre gestionnaire d'événements change fera l'affaire.

Par exemple:

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

C'est une vieille question, mais il est venu en premier dans les résultats de recherche Google.

La solution que j'ai utilisée est similaire à celle de jAndy.

window.location.pathname me donne l'URL de la page sans la chaîne de requête. Je suis alors en mesure de construire la chaîne de requête avec "?"+$.param({'foo':'bar','base':'ball'}) que j'ajoute ensuite au chemin d'accès et mettre à window.location.href.

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

Answer 3

Si vous allez avec la réponse top rated, vous pouvez remplacer

http:// 

dans le code avec

window.location.protocol 

pour que cela fonctionne pour d'autres protocoles, comme https ou fichier. Alors

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

Answer 4

Si vous avez un querystring existant que vous souhaitez conserver alors cette version fait cela et ajoute de nouveaux params à tous ceux qui existent déjà. Les clés sont converties en minuscules afin que les doublons ne soient pas ajoutés. Le maintien de la quersytring rend la solution plus compliquée, donc je ne le ferais que si vous en aviez besoin.

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

Si vous voulez un moyen très simple de préserver la chaîne de requête et peut-être à append, utilisez window.location.search; voici un extrait:

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; 

Vous pouvez, bien sûr, utiliser d'une manière plus sophistiquée de la construction du reste de votre chaîne de requête, que l'on trouve dans les autres exemples, mais la clé est de tirer parti de Location.search.