Bir sorgu dizesi parametresini nasıl ekleyebilir veya güncelleyebilirim?

Javascript ile mevcut değilse veya varsa, mevcut değeri güncelleştirmek için bir sorgu dizesi parametresi nasıl ekleyebilirim? Müşteri tarafı gelişimi için jquery kullanıyorum.

Ulaşmak istediklerimi yerine getiren aşağıdaki işlevi yazdım:

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;
  }
}

Çözümü genişlettik ve kullanıcı girdisi ve urls çapa dikkate alınarak sorgu dizesi parametrelerini değiştirmek / güncellemek / kaldırmak için buldum başka bir ile birleştirdim.

Bir değerin verilmemesi parametreyi kaldıracak, bir değerin parametrenin ekleneceğini / güncelleneceğini belirtin. Herhangi bir URL sağlanmazsa, window.location öğesinden alınır.

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;
        }
    }
}

Güncelleme

Querystring ilk parametre kaldırılırken bir hata oluştu, ben regex ve bir düzeltme eklemek için test yeniden çalıştı.

İkinci Güncelleme

@ JarónBarends tarafından önerildiği gibi - Tanımlanmamışlara karşı kontrol etmek için Tweak değer kontrolü ve 0 değerlerini ayarlamaya izin vermek için null

Üçüncü Güncelleme

Bir hashtag'in doğrudan bir sorgu dizesi değişkeninin kaldırılmasının düzeltilen hashtag sembolünü kaybetmesine neden olan bir hata oluştu

Dördüncü Güncelleme

@ Regop ilk RegExp nesnesinde bir regex optimizasyonu işaret ettiğiniz için teşekkürler. @YonatanKarni tarafından bulunan (\? | &) Kullanımıyla ilgili sorun nedeniyle ilk normal ifadeyi ([? &]) Olarak ayarlayın

Beşinci Güncelleme

İf / else deyiminde bildiren karma değişken kaldırılıyor

URLSearchParams programı ile kombinasyon halinde bu için yararlı olabilir window.location.search. Örneğin:

if ('URLSearchParams' in window) {
    var searchParams = new URLSearchParams(window.location.search);
    searchParams.set("foo", "bar");
    window.location.search = searchParams.toString();
}

Şimdi fooolarak ayarlandıbar olup olmadığına bakılmaksızın .

Bununla birlikte, yukarıdaki atama window.location.searchsayfa yüklenmesine neden olacaktır, bu nedenle bu istenmiyorsa Geçmiş API'sını aşağıdaki gibi kullanın :

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);
}

Artık sorgu dizelerinin olası varlığını ele almak için kendi normal ifadenizi veya mantığınızı yazmanıza gerek yoktur.

Bununla birlikte, tarayıcı desteği şu anda deneysel olduğundan ve yalnızca Chrome, Firefox, Safari, iOS Safari, Android Tarayıcı, Android Chrome ve Opera'nın son sürümlerinde kullanıldığından zayıftır. Kullanmaya karar verirseniz bir çoklu dolgu ile kullanın.

Güncelleme: Orijinal yanıtımdan bu yana tarayıcı desteği geliştirildi.

@ Amateur's answer (ve şimdi @j_walker_dev yorumundan düzeltmeyi içeren) dayanarak, ancak url'deki karma etiketler hakkındaki yorumu dikkate alarak aşağıdakileri kullanıyorum:

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;
  }
}

[?|&]Elbette olması gereken regex'te düzeltmek için düzenlendi[?&] yorumlarda belirtildiği gibi

Düzenleme: URL parametrelerini de kaldırmayı destekleyen alternatif sürüm. value === undefinedKaldırma işlemini belirtmenin yolu olarak kullandım . value === falseİstendiği gibi hatta ayrı bir giriş parametresi kullanabilir .

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;
  }
  }  
}

En eylem görmek https://jsfiddle.net/bp3tmuxh/1/

İşte bunu yapmak için kütüphanem: https://github.com/Mikhus/jsurl

var u = new Url;
u.query.param='value'; // adds or replaces the param
alert(u)

Bu sorunun eski olduğunu ve ölüme cevap verildiğini anlıyorum, ama işte benim sapmam. Burada tekerleği yeniden icat etmeye çalışıyorum çünkü şu anda kabul edilen cevabı kullanıyordum ve URL parçalarının yanlış işlenmesi son zamanlarda beni bir projede ısırdı.

Fonksiyon aşağıdadır. Oldukça uzun, ancak mümkün olduğunca esnek olması sağlandı. Kısaltmak / geliştirmek için önerileri çok isterim. Bunun için küçük bir jsFiddle test paketi hazırladım (veya diğer benzer fonksiyonlar). Bir fonksiyon oradaki testlerin her birini geçebiliyorsa, muhtemelen gitmek iyi olur diyorum.

Güncelleme: URL'leri ayrıştırmak için DOM'u kullanmak için harika bir işlevle karşılaştım , bu yüzden bu tekniği buraya dahil ettim. Fonksiyonu daha kısa ve daha güvenilir hale getirir. Bu işlevin yazarını destekler.

/**
 * 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;
}

window.location.search okunur / yazılır.

Ancak - sorgu dizesini değiştirmek, bulunduğunuz sayfayı yeniden yönlendirir ve sunucudan yenilemeye neden olur.

Yapmaya çalıştığınız şey istemci tarafı durumunu korumaksa (ve potansiyel olarak yer imi yapabiliyorsa), sizi aynı sayfada (window.location) tutan sorgu dizesi yerine URL karmasını değiştirmek istersiniz. hash okuma / yazma). Twitter.com gibi web siteleri böyle yapar.

Ayrıca geri düğmesinin çalışmasını da isteyeceksiniz, javascript etkinliklerini karma değişiklik etkinliğine bağlamanız gerekecek, bunun için iyi bir eklenti http://benalman.com/projects/jquery-hashchange-plugin/

Ayarlanmamışsa veya yeni bir değerle güncellemek istiyorsanız şunları kullanabilirsiniz:

window.location.search = 'param=value'; // or param=new_value

Bu arada, basit Javascript'tir.

DÜZENLE

Jquery query-object eklentisini kullanmayı denemek isteyebilirsiniz

window.location.search = jQuery.query.set ("param", 5);

İşte yaklaşımım: location.params() (aşağıda gösterilen) fonksiyon alıcı veya ayarlayıcı olarak kullanılabilir. Örnekler:

URL verildiğinde http://example.com/?foo=bar&baz#some-hash,

1. location.params()tüm sorgu parametreleri içeren bir nesne döndürür: {foo: 'bar', baz: true}.
2. location.params('foo')dönecektir 'bar'.
3. location.params({foo: undefined, hello: 'world', test: true})URL'yi olarak değiştirir http://example.com/?baz&hello=world&test#some-hash.

İşte params()isteğe bağlı olarak window.locationnesneye atanabilen işlev .

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('&');
};

Bu benim tercihim ve aklıma gelen vakaları kapsıyor. Herkes tek bir yerine azaltmak için bir yol düşünebilir miyim?

function setParam(uri, key, val) {
    return uri
        .replace(RegExp("([?&]"+key+"(?=[=&#]|$)[^#&]*|(?=#|$))"), "&"+key+"="+encodeURIComponent(val))
        .replace(/^([^?&]+)&/, "$1?");
}

Bunun oldukça eski olduğunu biliyorum ama burada çalışma versiyonumu kovmak istiyorum.

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>

NOT Bu @elreimundo'nun değiştirilmiş bir sürümüdür

Buradan almam ("katı kullan" ile uyumlu; gerçekten jQuery kullanmıyor):

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);
}

Örnek kullanım:

// 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()));
});

@Ellemayo'nun verdiği cevaba dayanarak, istenirse karma etiketinin devre dışı bırakılmasına izin veren aşağıdaki çözümü buldum:

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;
}

Buna şöyle deyin:

updateQueryString('foo', 'bar', {
    url: 'http://my.example.com#hash',
    hash: false
});

Sonuçlar:

http://my.example.com?foo=bar

İşte ilgilenen daha kısa bir versiyon

• belirli bir parametreli veya parametresiz sorgu
• birden çok parametre değeri olan sorgu
• karma içeren sorgu

Kod:

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);
}

Regex açıklaması bulunabilir burada .

NOT : Bu çözüm @ amatör cevabına dayanmaktadır, ancak birçok iyileştirme ile.

ES6 ve jQuery kullanarak mevcut bir url'ye parametre listesi ekleyen kod:

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;
    }
}

ListOfParams nerede

const listOfParams = {
    'name_1': 'value_1',
    'name_2': 'value_2',
    'name_N': 'value_N',
};

Kullanım Örneği:

    UrlBuilder.appendParametersToUrl(urlBase, listOfParams);

Hızlı testler:

    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

Düzenli ifadeler kullanmadan farklı bir yaklaşım . URL'nin sonundaki 'karma' bağlantılarının yanı sıra birden çok soru işareti grafiğini (?) Destekler. Normal ifade yaklaşımından biraz daha hızlı olmalıdır.

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
}

Jquery'ye dayalı olarak URL'den sorgu dizesi parametresi eklemek, kaldırmak ve değiştirmek için bu işlevi kullanın

/**
@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];
    }
}

URL'ye yeni ekleyin ve mevcut parametreyi değiştirin

var new_url = modifyURLQuery("http://google.com?foo=34", {foo: 50, bar: 45});
// Result: http://google.com?foo=50&bar=45

Mevcut olanları kaldır

var new_url = modifyURLQuery("http://google.com?foo=50&bar=45", {bar: null});
// Result: http://google.com?foo=50

Kullanarak jQuerybiz aşağıdaki gibi yapabilirsiniz

var query_object = $.query_string;
query_object["KEY"] = "VALUE";
var new_url = window.location.pathname + '?'+$.param(query_object)

Değişkende new_urlyeni sorgu parametrelerimiz olacaktır.

Referans: http://api.jquery.com/jquery.param/

window.location.searchGal ve tradyblix tarafından önerildiği gibi değiştirmeye yönelik bir kod örneği vermek için :

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;

Belirli bir sorgu dizesini bulmak ve değerini değiştirmek için Java komut dosyası kodu *

('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;
                }
            })
        });

Evet, sorgu dizemimin taşacağı ve çoğaltılacağı bir sorunum vardı, ancak bu benim halsizliğimden kaynaklanıyordu. bu yüzden biraz oynadım ve bazı js jquery (aslında cızırtı) ve C # magick çalıştı.

Böylece sadece sunucu geçirilen değerleri ile yaptıktan sonra, değerleri artık önemli değil, yeniden kullanımı yoktur, müşteri aynı şeyi açıkça yapmak isterse, her zaman yeni bir istek olacağını fark ettim. aynı parametreler geçirilir. Ve thats tüm clientside, bu yüzden bazı önbellekleme / çerezler vb bu konuda serin olabilir.

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.
          }
      }
  }

Tamam eleştiri açığız (bu gece bir concoction öyleyse ayarlamaları not çekinmeyin). Eğer bu işe yaradıysa, mutlu ol, Happy Coding.

Hiçbir yineleme yok, her istek sizin değiştirdiğiniz kadar benzersiz ve bunun nasıl yapılandırıldığından dolayı, dom'dan dinamik olarak daha fazla sorgu eklemek kolaydır.

Çapa HTML öğesinin dahili özelliklerini kullanan alternatif bir yöntem şunlardır:

• Çok değerli parametreleri işler.
• # Parçasını veya sorgu dizesinin kendisinden başka bir şeyi değiştirme riski yoktur.
• Okumak biraz daha kolay olabilir mi? Ama daha uzun.

    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;
	};

aynı anda birden fazla parametre ayarlamak istiyorsanız:

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;
}

@ amateur's ile aynı fonksiyon

jslint size bir hata verirse bunu for döngüsünden sonra ekleyin

if(params.hasOwnProperty(key))

Bu sayfada birçok garip ve gereksiz yere karmaşık cevaplar var. En yüksek puan alan, @ amatör's, RegExp'te biraz gereksiz tüylere sahip olmasına rağmen oldukça iyidir. İşte daha temiz RegExp ve daha temiz bir replaceçağrı ile biraz daha uygun bir çözüm :

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
  ;
}

Ek bir bonus olarak, uribir dize değilse , aramaya çalıştığınızda hata almazsınız matchveyareplace bu yöntemleri uygulamayan bir şey .

Ve bir karma durumunu ele almak istiyorsanız (ve zaten düzgün biçimlendirilmiş HTML için bir kontrol yaptınız), aynı mantığı içeren yeni bir işlev yazmak yerine mevcut işlevden yararlanabilirsiniz:

function updateQueryStringParams(url, key, value) {
    var splitURL = url.split('#');
    var hash = splitURL[1];
    var uri = updateQueryStringParamsNoHash(splitURL[0]);
    return hash == null ? uri : uri + '#' + hash;
}

Ya da @ Adam'ın başka türlü mükemmel cevabında küçük değişiklikler yapabilirsiniz:

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] || '');
  }
}

Bu amaca hizmet etmelidir:

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("&");
}