Comment puis-je ajouter ou mettre à jour un paramètre de chaîne de requête?
Avec javascript, comment puis-je ajouter un paramètre de chaîne de requête à l'URL s'il n'est pas présent ou s'il existe, mettre à jour la valeur actuelle? J'utilise jQuery pour le développement de mon côté client.
J'ai écrit la fonction suivante qui accomplit ce que je veux réaliser:
function updateQueryStringParameter(uri, key, value) {
var re = new RegExp("([?&])" + key + "=.*?(&|$)", "i");
var separator = uri.indexOf('?') !== -1 ? "&" : "?";
if (uri.match(re)) {
return uri.replace(re, '$1' + key + "=" + value + '$2');
}
else {
return uri + separator + key + "=" + value;
}
}
J'ai étendu la solution et je l'ai combinée avec un autre que j'ai trouvé pour remplacer/mettre à jour/supprimer les paramètres de chaîne de requête en fonction de l'entrée de l'utilisateur et en prenant en compte l'ancre des URL.
Si vous ne fournissez pas de valeur, le paramètre sera supprimé, si vous en fournissez une, le paramètre sera ajouté/mis à jour. Si aucune URL n'est fournie, elle sera extraite de window.location
function UpdateQueryString(key, value, url) {
if (!url) url = window.location.href;
var re = new RegExp("([?&])" + key + "=.*?(&|#|$)(.*)", "gi"),
hash;
if (re.test(url)) {
if (typeof value !== 'undefined' && value !== null)
return url.replace(re, '$1' + key + "=" + value + '$2$3');
else {
hash = url.split('#');
url = hash[0].replace(re, '$1$3').replace(/(&|\?)$/, '');
if (typeof hash[1] !== 'undefined' && hash[1] !== null)
url += '#' + hash[1];
return url;
}
}
else {
if (typeof value !== 'undefined' && value !== null) {
var separator = url.indexOf('?') !== -1 ? '&' : '?';
hash = url.split('#');
url = hash[0] + separator + key + '=' + value;
if (typeof hash[1] !== 'undefined' && hash[1] !== null)
url += '#' + hash[1];
return url;
}
else
return url;
}
}
Mettre à jour
Il y avait un bogue lors de la suppression du premier paramètre de la chaîne de requête, j'ai retravaillé la regex et testé pour inclure un correctif.
Deuxième mise à jour
Comme suggéré par @ JarónBarends - Tweak valeur vérifier pour vérifier contre indéfini et null pour permettre la définition de valeurs 0
Troisième mise à jour
Il y avait un bogue dans lequel la suppression d'une variable de chaîne de requête directement avant qu'un hashtag ne perde le symbole de hashtag qui a été corrigé
Quatrième mise à jour
Merci à @rooby d’avoir signalé une optimisation de la regex dans le premier objet RegExp . Régler la regex initiale sur ([? &]) En raison d’un problème lié à l’utilisation de (\? | &) Trouvée par @YonatanKarni.
Cinquième mise à jour
Supprimer la déclaration hash var dans l'instruction if/else
L'utilitaire URLSearchParams peut être utile pour cela en combinaison avec window.location.search. Par exemple:
if ('URLSearchParams' in window) {
var searchParams = new URLSearchParams(window.location.search);
searchParams.set("foo", "bar");
window.location.search = searchParams.toString();
}
Désormais, foo a été défini sur bar, qu’il existe ou non déjà.
Cependant, l'attribution ci-dessus à window.location.search provoquera un chargement de page. Si cela n'est pas souhaitable, utilisez l'API History comme suit:
if ('URLSearchParams' in window) {
var searchParams = new URLSearchParams(window.location.search)
searchParams.set("foo", "bar");
var newRelativePathQuery = window.location.pathname + '?' + searchParams.toString();
history.pushState(null, '', newRelativePathQuery);
}
Maintenant, vous n'avez plus besoin d'écrire votre propre regex ou logique pour gérer l'existence éventuelle de chaînes de requête.
Cependant, la prise en charge du navigateur est médiocre car elle est actuellement expérimentale et n’est utilisée que dans les versions récentes de Chrome, Firefox, Safari, Safari iOS, Navigateur Android, Android Chrome et Opera. Utilisez avec un polyfill si vous décidez de l'utiliser.
Mise à jour: La prise en charge du navigateur s'est améliorée depuis ma réponse initiale.
Basé sur la réponse de @ amateur (et intégrant maintenant le correctif de @j_walker_dev commenter), mais en tenant compte du commentaire sur les balises de hachage dans l'URL, j'utilise ce qui suit:
function updateQueryStringParameter(uri, key, value) {
var re = new RegExp("([?&])" + key + "=.*?(&|#|$)", "i");
if (uri.match(re)) {
return uri.replace(re, '$1' + key + "=" + value + '$2');
} else {
var hash = '';
if( uri.indexOf('#') !== -1 ){
hash = uri.replace(/.*#/, '#');
uri = uri.replace(/#.*/, '');
}
var separator = uri.indexOf('?') !== -1 ? "&" : "?";
return uri + separator + key + "=" + value + hash;
}
}
Edité pour corriger [?|&] dans regex qui devrait bien sûr être [?&] comme indiqué dans les commentaires
Edit: Version alternative pour prendre en charge la suppression des paramètres d’URL. J'ai utilisé value === undefined comme moyen d'indiquer la suppression. Pourrait utiliser value === false ou même un paramètre d'entrée séparé comme souhaité.
function updateQueryStringParameter(uri, key, value) {
var re = new RegExp("([?&])" + key + "=.*?(&|#|$)", "i");
if( value === undefined ) {
if (uri.match(re)) {
return uri.replace(re, '$1$2');
} else {
return uri;
}
} else {
if (uri.match(re)) {
return uri.replace(re, '$1' + key + "=" + value + '$2');
} else {
var hash = '';
if( uri.indexOf('#') !== -1 ){
hash = uri.replace(/.*#/, '#');
uri = uri.replace(/#.*/, '');
}
var separator = uri.indexOf('?') !== -1 ? "&" : "?";
return uri + separator + key + "=" + value + hash;
}
}
}
Voyez-le en action à https://jsfiddle.net/bp3tmuxh/1/
Voici ma bibliothèque pour le faire: https://github.com/Mikhus/jsurl
var u = new Url;
u.query.param='value'; // adds or replaces the param
alert(u)
window.location.search est en lecture/écriture.
Cependant, la modification de la chaîne de requête redirige la page sur laquelle vous vous trouvez et provoque une actualisation à partir du serveur.
Si vous essayez de conserver l'état côté client (et éventuellement de le rendre compatible avec les signets), vous voudrez modifier le hachage de l'URL au lieu de la chaîne de requête, ce qui vous permet de rester sur la même page (window.location. le hachage est en lecture/écriture). C'est comme cela que des sites Web comme Twitter.com le font.
Vous voudrez également que le bouton Précédent fonctionne, vous devrez lier les événements javascript à l'événement hash change, un bon plugin pour cela est http://benalman.com/projects/jquery-hashchange-plugin/
Voici mon approche: La fonction location.params() (illustrée ci-dessous) peut être utilisée comme getter ou setter. Exemples:
Étant donné que l'URL est http://example.com/?foo=bar&baz#some-hash,
location.params()renverra un objet avec tous les paramètres de la requête:{foo: 'bar', baz: true}.location.params('foo')retournera'bar'.location.params({foo: undefined, hello: 'world', test: true})changera l'URL enhttp://example.com/?baz&hello=world&test#some-hash.
Voici la fonction params(), qui peut éventuellement être affectée à l’objet window.location.
location.params = function(params) {
var obj = {}, i, parts, len, key, value;
if (typeof params === 'string') {
value = location.search.match(new RegExp('[?&]' + params + '=?([^&]*)[&#$]?'));
return value ? value[1] : undefined;
}
var _params = location.search.substr(1).split('&');
for (i = 0, len = _params.length; i < len; i++) {
parts = _params[i].split('=');
if (! parts[0]) {continue;}
obj[parts[0]] = parts[1] || true;
}
if (typeof params !== 'object') {return obj;}
for (key in params) {
value = params[key];
if (typeof value === 'undefined') {
delete obj[key];
} else {
obj[key] = value;
}
}
parts = [];
for (key in obj) {
parts.Push(key + (obj[key] === true ? '' : '=' + obj[key]));
}
location.search = parts.join('&');
};
S'il n'est pas défini ou si vous souhaitez mettre à jour une nouvelle valeur, vous pouvez utiliser:
window.location.search = 'param=value'; // or param=new_value
C'est en Javascript simple, au fait.
MODIFIER
Vous voudrez peut-être essayer d’utiliser jquery query-object plugin
window.location.search = jQuery.query.set ("param", 5);
Je me rends compte que cette question est ancienne et qu'elle a trouvé une réponse à mort, mais voici ce que je tente de faire. J'essaie de réinventer la roue ici car j'utilisais la réponse actuellement acceptée et la mauvaise gestion des fragments d'URL m'a récemment mordu dans un projet.
La fonction est ci-dessous. C'est assez long, mais il a été conçu pour être aussi résistant que possible. J'aimerais des suggestions pour le raccourcir/améliorer. J'ai mis en place une petite suite de tests jsFiddle pour cela (ou d’autres fonctions similaires). Si une fonction peut réussir chacun des tests, je dis que c'est probablement bien de partir.
Update: Je suis tombé sur une fonction intéressante pour utiliser le DOM pour analyser les URL , et j'ai donc intégré cette technique ici. Cela rend la fonction plus courte et plus fiable. Des accessoires pour l'auteur de cette fonction.
/**
* Add or update a query string parameter. If no URI is given, we use the current
* window.location.href value for the URI.
*
* Based on the DOM URL parser described here:
* http://james.padolsey.com/javascript/parsing-urls-with-the-dom/
*
* @param (string) uri Optional: The URI to add or update a parameter in
* @param (string) key The key to add or update
* @param (string) value The new value to set for key
*
* Tested on Chrome 34, Firefox 29, IE 7 and 11
*/
function update_query_string( uri, key, value ) {
// Use window URL if no query string is provided
if ( ! uri ) { uri = window.location.href; }
// Create a dummy element to parse the URI with
var a = document.createElement( 'a' ),
// match the key, optional square brackets, an equals sign or end of string, the optional value
reg_ex = new RegExp( key + '((?:\\[[^\\]]*\\])?)(=|$)(.*)' ),
// Setup some additional variables
qs,
qs_len,
key_found = false;
// Use the JS API to parse the URI
a.href = uri;
// If the URI doesn't have a query string, add it and return
if ( ! a.search ) {
a.search = '?' + key + '=' + value;
return a.href;
}
// Split the query string by ampersands
qs = a.search.replace( /^\?/, '' ).split( /&(?:amp;)?/ );
qs_len = qs.length;
// Loop through each query string part
while ( qs_len > 0 ) {
qs_len--;
// Remove empty elements to prevent double ampersands
if ( ! qs[qs_len] ) { qs.splice(qs_len, 1); continue; }
// Check if the current part matches our key
if ( reg_ex.test( qs[qs_len] ) ) {
// Replace the current value
qs[qs_len] = qs[qs_len].replace( reg_ex, key + '$1' ) + '=' + value;
key_found = true;
}
}
// If we haven't replaced any occurrences above, add the new parameter and value
if ( ! key_found ) { qs.Push( key + '=' + value ); }
// Set the new query string
a.search = '?' + qs.join( '&' );
return a.href;
}
C'est ma préférence et elle couvre les cas auxquels je peux penser. Quelqu'un peut-il penser à un moyen de le réduire à un seul remplaçant?
function setParam(uri, key, val) {
return uri
.replace(RegExp("([?&]"+key+"(?=[=&#]|$)[^#&]*|(?=#|$))"), "&"+key+"="+encodeURIComponent(val))
.replace(/^([^?&]+)&/, "$1?");
}
Je sais que c'est assez vieux, mais je veux mettre le version de travail ici.
function addOrUpdateUrlParam(uri, paramKey, paramVal) {
var re = new RegExp("([?&])" + paramKey + "=[^&#]*", "i");
if (re.test(uri)) {
uri = uri.replace(re, '$1' + paramKey + "=" + paramVal);
} else {
var separator = /\?/.test(uri) ? "&" : "?";
uri = uri + separator + paramKey + "=" + paramVal;
}
return uri;
}
jQuery(document).ready(function($) {
$('#paramKey,#paramValue').on('change', function() {
if ($('#paramKey').val() != "" && $('#paramValue').val() != "") {
$('#uri').val(addOrUpdateUrlParam($('#uri').val(), $('#paramKey').val(), $('#paramValue').val()));
}
});
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input style="width:100%" type="text" id="uri" value="http://www.example.com/text.php">
<label style="display:block;">paramKey
<input type="text" id="paramKey">
</label>
<label style="display:block;">paramValue
<input type="text" id="paramValue">
</label>NOTECeci est une version modifiée de @elreimundo
En fonction de la réponse donnée par @ellemayo, j'ai proposé la solution suivante qui permet de désactiver la balise de hachage si vous le souhaitez:
function updateQueryString(key, value, options) {
if (!options) options = {};
var url = options.url || location.href;
var re = new RegExp("([?&])" + key + "=.*?(&|#|$)(.*)", "gi"), hash;
hash = url.split('#');
url = hash[0];
if (re.test(url)) {
if (typeof value !== 'undefined' && value !== null) {
url = url.replace(re, '$1' + key + "=" + value + '$2$3');
} else {
url = url.replace(re, '$1$3').replace(/(&|\?)$/, '');
}
} else if (typeof value !== 'undefined' && value !== null) {
var separator = url.indexOf('?') !== -1 ? '&' : '?';
url = url + separator + key + '=' + value;
}
if ((typeof options.hash === 'undefined' || options.hash) &&
typeof hash[1] !== 'undefined' && hash[1] !== null)
url += '#' + hash[1];
return url;
}
Appelez ça comme ça:
updateQueryString('foo', 'bar', {
url: 'http://my.example.com#hash',
hash: false
});
Résulte en:
http://my.example.com?foo=bar
Voici une version plus courte qui prend en charge
- requête avec ou sans paramètre donné
- requête avec plusieurs valeurs de paramètre
- requête contenant hash
Code:
var setQueryParameter = function(uri, key, value) {
var re = new RegExp("([?&])("+ key + "=)[^&#]*", "g");
if (uri.match(re))
return uri.replace(re, '$1$2' + value);
// need to add parameter to URI
var paramString = (uri.indexOf('?') < 0 ? "?" : "&") + key + "=" + value;
var hashIndex = uri.indexOf('#');
if (hashIndex < 0)
return uri + paramString;
else
return uri.substring(0, hashIndex) + paramString + uri.substring(hashIndex);
}
La description regex peut être trouvée ici .
NOTE: Cette solution est basée sur @amateur answer, mais avec de nombreuses améliorations.
Ma prise à partir d’ici (compatible avec "use strict"; n’utilise pas vraiment jQuery):
function decodeURIParams(query) {
if (query == null)
query = window.location.search;
if (query[0] == '?')
query = query.substring(1);
var params = query.split('&');
var result = {};
for (var i = 0; i < params.length; i++) {
var param = params[i];
var pos = param.indexOf('=');
if (pos >= 0) {
var key = decodeURIComponent(param.substring(0, pos));
var val = decodeURIComponent(param.substring(pos + 1));
result[key] = val;
} else {
var key = decodeURIComponent(param);
result[key] = true;
}
}
return result;
}
function encodeURIParams(params, addQuestionMark) {
var pairs = [];
for (var key in params) if (params.hasOwnProperty(key)) {
var value = params[key];
if (value != null) /* matches null and undefined */ {
pairs.Push(encodeURIComponent(key) + '=' + encodeURIComponent(value))
}
}
if (pairs.length == 0)
return '';
return (addQuestionMark ? '?' : '') + pairs.join('&');
}
//// alternative to $.extend if not using jQuery:
// function mergeObjects(destination, source) {
// for (var key in source) if (source.hasOwnProperty(key)) {
// destination[key] = source[key];
// }
// return destination;
// }
function navigateWithURIParams(newParams) {
window.location.search = encodeURIParams($.extend(decodeURIParams(), newParams), true);
}
Exemple d'utilisation:
// add/update parameters
navigateWithURIParams({ foo: 'bar', boz: 42 });
// remove parameter
navigateWithURIParams({ foo: null });
// submit the given form by adding/replacing URI parameters (with jQuery)
$('.filter-form').submit(function(e) {
e.preventDefault();
navigateWithURIParams(decodeURIParams($(this).serialize()));
});
Utilisez cette fonction pour ajouter, supprimer et modifier le paramètre de chaîne de requête de l'URL basé sur jquery
/**
@param String url
@param object param {key: value} query parameter
*/
function modifyURLQuery(url, param){
var value = {};
var query = String(url).split('?');
if (query[1]) {
var part = query[1].split('&');
for (i = 0; i < part.length; i++) {
var data = part[i].split('=');
if (data[0] && data[1]) {
value[data[0]] = data[1];
}
}
}
value = $.extend(value, param);
// Remove empty value
for (i in value){
if(!value[i]){
delete value[i];
}
}
// Return url with modified parameter
if(value){
return query[0] + '?' + $.param(value);
} else {
return query[0];
}
}
Ajouter un nouveau paramètre et le modifier à l'url
var new_url = modifyURLQuery("http://google.com?foo=34", {foo: 50, bar: 45});
// Result: http://google.com?foo=50&bar=45
Supprimer les existants
var new_url = modifyURLQuery("http://google.com?foo=50&bar=45", {bar: null});
// Result: http://google.com?foo=50
Une approche différente sans utiliser d’expressions régulières . Prend en charge les ancres de hachage à la fin de l'URL, ainsi que plusieurs caractères de point d'interrogation (?) Devrait être légèrement plus rapide que l'approche d'expression régulière.
function setUrlParameter(url, key, value) {
var parts = url.split("#", 2), anchor = parts.length > 1 ? "#" + parts[1] : '';
var query = (url = parts[0]).split("?", 2);
if (query.length === 1)
return url + "?" + key + "=" + value + anchor;
for (var params = query[query.length - 1].split("&"), i = 0; i < params.length; i++)
if (params[i].toLowerCase().startsWith(key.toLowerCase() + "="))
return params[i] = key + "=" + value, query[query.length - 1] = params.join("&"), query.join("?") + anchor;
return url + "&" + key + "=" + value + anchor
}
Code qui ajoute une liste de paramètres à une URL existante en utilisant ES6 et jQuery:
class UrlBuilder {
static appendParametersToUrl(baseUrl, listOfParams) {
if (jQuery.isEmptyObject(listOfParams)) {
return baseUrl;
}
const newParams = jQuery.param(listOfParams);
let partsWithHash = baseUrl.split('#');
let partsWithParams = partsWithHash[0].split('?');
let previousParams = '?' + ((partsWithParams.length === 2) ? partsWithParams[1] + '&' : '');
let previousHash = (partsWithHash.length === 2) ? '#' + partsWithHash[1] : '';
return partsWithParams[0] + previousParams + newParams + previousHash;
}
}
Où listOfParams est comme
const listOfParams = {
'name_1': 'value_1',
'name_2': 'value_2',
'name_N': 'value_N',
};
Exemple d'utilisation:
UrlBuilder.appendParametersToUrl(urlBase, listOfParams);
Tests rapides:
url = 'http://hello.world';
console.log('=> ', UrlParameters.appendParametersToUrl(url, null));
// Output: http://hello.world
url = 'http://hello.world#h1';
console.log('=> ', UrlParameters.appendParametersToUrl(url, null));
// Output: http://hello.world#h1
url = 'http://hello.world';
params = {'p1': 'v1', 'p2': 'v2'};
console.log('=> ', UrlParameters.appendParametersToUrl(url, params));
// Output: http://hello.world?p1=v1&p2=v2
url = 'http://hello.world?p0=v0';
params = {'p1': 'v1', 'p2': 'v2'};
console.log('=> ', UrlParameters.appendParametersToUrl(url, params));
// Output: http://hello.world?p0=v0&p1=v1&p2=v2
url = 'http://hello.world#h1';
params = {'p1': 'v1', 'p2': 'v2'};
console.log('=> ', UrlParameters.appendParametersToUrl(url, params));
// Output: http://hello.world?p1=v1&p2=v2#h1
url = 'http://hello.world?p0=v0#h1';
params = {'p1': 'v1', 'p2': 'v2'};
console.log('=> ', UrlParameters.appendParametersToUrl(url, params));
// Output: http://hello.world?p0=v0&p1=v1&p2=v2#h1
En utilisant jQuery on peut faire comme ci-dessous
var query_object = $.query_string;
query_object["KEY"] = "VALUE";
var new_url = window.location.pathname + '?'+$.param(query_object)
Dans la variable new_url, nous aurons de nouveaux paramètres de requête.
Référence: http://api.jquery.com/jquery.param/
Cela devrait servir le but:
function updateQueryString(url, key, value) {
var arr = url.split("#");
var url = arr[0];
var fragmentId = arr[1];
var updatedQS = "";
if (url.indexOf("?") == -1) {
updatedQS = encodeURIComponent(key) + "=" + encodeURIComponent(value);
}
else {
updatedQS = addOrModifyQS(url.substring(url.indexOf("?") + 1), key, value);
}
url = url.substring(0, url.indexOf("?")) + "?" + updatedQS;
if (typeof fragmentId !== 'undefined') {
url = url + "#" + fragmentId;
}
return url;
}
function addOrModifyQS(queryStrings, key, value) {
var oldQueryStrings = queryStrings.split("&");
var newQueryStrings = new Array();
var isNewKey = true;
for (var i in oldQueryStrings) {
var currItem = oldQueryStrings[i];
var searchKey = key + "=";
if (currItem.indexOf(searchKey) != -1) {
currItem = encodeURIComponent(key) + "=" + encodeURIComponent(value);
isNewKey = false;
}
newQueryStrings.Push(currItem);
}
if (isNewKey) {
newQueryStrings.Push(encodeURIComponent(key) + "=" + encodeURIComponent(value));
}
return newQueryStrings.join("&");
}
si vous souhaitez définir plusieurs paramètres à la fois:
function updateQueryStringParameters(uri, params) {
for(key in params){
var value = params[key],
re = new RegExp("([?&])" + key + "=.*?(&|$)", "i"),
separator = uri.indexOf('?') !== -1 ? "&" : "?";
if (uri.match(re)) {
uri = uri.replace(re, '$1' + key + "=" + value + '$2');
}
else {
uri = uri + separator + key + "=" + value;
}
}
return uri;
}
même fonction que @ amateur
si jslint vous donne une erreur, ajoutez ceci après la boucle for
if(params.hasOwnProperty(key))
Il y a beaucoup de réponses maladroites et inutilement compliquées sur cette page. Le mieux noté, @ amateur's, est assez bon, bien qu'il y ait un peu de peluches inutiles dans le RegExp. Voici une solution légèrement plus optimale avec RegExp plus propre et un appel replace plus propre:
function updateQueryStringParamsNoHash(uri, key, value) {
var re = new RegExp("([?&])" + key + "=[^&]*", "i");
return re.test(uri)
? uri.replace(re, '$1' + key + "=" + value)
: uri + separator + key + "=" + value
;
}
En prime, si uri n'est pas une chaîne, vous ne recevrez pas d'erreur si vous tentez d'appeler match ou replace sur quelque chose qui peut ne pas implémenter ces méthodes.
Et si vous souhaitez gérer le cas d'un hachage (et que vous avez déjà vérifié le format HTML correctement formaté), vous pouvez exploiter la fonction existante au lieu d'écrire une nouvelle fonction contenant la même logique:
function updateQueryStringParams(url, key, value) {
var splitURL = url.split('#');
var hash = splitURL[1];
var uri = updateQueryStringParamsNoHash(splitURL[0]);
return hash == null ? uri : uri + '#' + hash;
}
Ou vous pouvez apporter de légers changements à l'excellente réponse de @ Adam:
function updateQueryStringParameter(uri, key, value) {
var re = new RegExp("([?&])" + key + "=[^&#]*", "i");
if (re.test(uri)) {
return uri.replace(re, '$1' + key + "=" + value);
} else {
var matchData = uri.match(/^([^#]*)(#.*)?$/);
var separator = /\?/.test(uri) ? "&" : "?";
return matchData[0] + separator + key + "=" + value + (matchData[1] || '');
}
}
Pour donner un exemple de code pour modifier window.location.search comme suggéré par Gal et tradyblix:
var qs = window.location.search || "?";
var param = key + "=" + value; // remember to URI encode your parameters
if (qs.length > 1) {
// more than just the question mark, so append with ampersand
qs = qs + "&";
}
qs = qs + param;
window.location.search = qs;
Voici une méthode alternative utilisant les propriétés incorporées de l'élément HTML d'ancrage:
- Traite les paramètres à valeurs multiples.
- Aucun risque de modifier le fragment # ou autre chose que la chaîne de requête elle-même.
- Peut-être un peu plus facile à lire? Mais c'est plus long.
var a = document.createElement('a'),
getHrefWithUpdatedQueryString = function(param, value) {
return updatedQueryString(window.location.href, param, value);
},
updatedQueryString = function(url, param, value) {
/*
A function which modifies the query string
by setting one parameter to a single value.
Any other instances of parameter will be removed/replaced.
*/
var fragment = encodeURIComponent(param) +
'=' + encodeURIComponent(value);
a.href = url;
if (a.search.length === 0) {
a.search = '?' + fragment;
} else {
var didReplace = false,
// Remove leading '?'
parts = a.search.substring(1)
// Break into pieces
.split('&'),
reassemble = [],
len = parts.length;
for (var i = 0; i < len; i++) {
var pieces = parts[i].split('=');
if (pieces[0] === param) {
if (!didReplace) {
reassemble.Push('&' + fragment);
didReplace = true;
}
} else {
reassemble.Push(parts[i]);
}
}
if (!didReplace) {
reassemble.Push('&' + fragment);
}
a.search = reassemble.join('&');
}
return a.href;
};Code de script Java pour rechercher une chaîne de requête spécifique et remplacer sa valeur *
('input.letter').click(function () {
//0- prepare values
var qsTargeted = 'letter=' + this.value; //"letter=A";
var windowUrl = '';
var qskey = qsTargeted.split('=')[0];
var qsvalue = qsTargeted.split('=')[1];
//1- get row url
var originalURL = window.location.href;
//2- get query string part, and url
if (originalURL.split('?').length > 1) //qs is exists
{
windowUrl = originalURL.split('?')[0];
var qs = originalURL.split('?')[1];
//3- get list of query strings
var qsArray = qs.split('&');
var flag = false;
//4- try to find query string key
for (var i = 0; i < qsArray.length; i++) {
if (qsArray[i].split('=').length > 0) {
if (qskey == qsArray[i].split('=')[0]) {
//exists key
qsArray[i] = qskey + '=' + qsvalue;
flag = true;
break;
}
}
}
if (!flag)// //5- if exists modify,else add
{
qsArray.Push(qsTargeted);
}
var finalQs = qsArray.join('&');
//6- prepare final url
window.location = windowUrl + '?' + finalQs;
}
else {
//6- prepare final url
//add query string
window.location = originalURL + '?' + qsTargeted;
}
})
});
Oui, j’ai eu un problème de débordement et de duplication de ma chaîne de requête, mais c’était dû à ma propre lenteur. J'ai donc joué un peu et travaillé sur quelques js jquery (Sizzle) et C # magick.
Donc, je viens de me rendre compte qu'après que le serveur a fini avec les valeurs passées, les valeurs n'ont plus d'importance, il n'y a pas de réutilisation, si le client veut faire la même chose, il s'agira évidemment d'une nouvelle requête, même si c'est la les mêmes paramètres sont passés. Et c’est tout pour le client, donc certains cache/cookies, etc. pourraient être cool en ce qui concerne.
JS:
$(document).ready(function () {
$('#ser').click(function () {
SerializeIT();
});
function SerializeIT() {
var baseUrl = "";
baseUrl = getBaseUrlFromBrowserUrl(window.location.toString());
var myQueryString = "";
funkyMethodChangingStuff(); //whatever else before serializing and creating the querystring
myQueryString = $('#fr2').serialize();
window.location.replace(baseUrl + "?" + myQueryString);
}
function getBaseUrlFromBrowserUrl(szurl) {
return szurl.split("?")[0];
}
function funkyMethodChangingStuff(){
//do stuff to whatever is in fr2
}
});
HTML:
<div id="fr2">
<input type="text" name="qURL" value="http://somewhere.com" />
<input type="text" name="qSPart" value="someSearchPattern" />
</div>
<button id="ser">Serialize! and go play with the server.</button>
C #:
using System.Web;
using System.Text;
using System.Collections.Specialized;
public partial class SomeCoolWebApp : System.Web.UI.Page
{
string weburl = string.Empty;
string partName = string.Empty;
protected void Page_Load(object sender, EventArgs e)
{
string loadurl = HttpContext.Current.Request.RawUrl;
string querySZ = null;
int isQuery = loadurl.IndexOf('?');
if (isQuery == -1) {
//If There Was no Query
}
else if (isQuery >= 1) {
querySZ = (isQuery < loadurl.Length - 1) ? loadurl.Substring(isQuery + 1) : string.Empty;
string[] getSingleQuery = querySZ.Split('?');
querySZ = getSingleQuery[0];
NameValueCollection qs = null;
qs = HttpUtility.ParseQueryString(querySZ);
weburl = qs["qURL"];
partName = qs["qSPart"];
//call some great method thisPageRocks(weburl,partName); or whatever.
}
}
}
D'accord, les critiques sont les bienvenues (ce fut une concoction nocturne alors n'hésitez pas à noter les ajustements). Si cela vous aide, contentez-vous, codage heureux.
Pas de doublons, chaque requête étant aussi unique que vous l'avez modifiée et, en raison de la structure de celle-ci, il est facile d'ajouter plus de requêtes de manière dynamique depuis le serveur principal.