Как я могу добавить или обновить параметр строки запроса?

311

С javascript, как я могу добавить параметр строки запроса к url, если он отсутствует или если он присутствует, обновите текущее значение? Я использую jquery для разработки клиентской части.

  • 1
    Похоже, что я написал функцию "parseQueryString" на JavaScript примерно 100 раз за свою карьеру. Это не трудно. Ключевые моменты: String#split принимает второй параметр для максимального разделения. map jQuery также будет полезна.
  • 0
    В этой публикации также много решений stackoverflow.com/questions/1090948/…
Показать ещё 1 комментарий
Теги:
query-string

24 ответа

450
Лучший ответ

Я написал следующую функцию, которая выполняет то, что я хочу достичь:

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;
  }
}
  • 35
    Этот ответ не работает, если в URI есть хеш - строки запроса должны быть помещены перед хешем, иначе они не будут отправлены на сервер. jsfiddle.net/4yXzR
  • 20
    [?|&] должно быть [?&]
Показать ещё 14 комментариев
175

Я расширил решение и скомбинировал его с другим, который я нашел для замены/обновления/удаления параметров строки запроса на основе ввода пользователя и с учетом привязки URL.

Если значение не указано, параметр будет удален, а параметр добавит/обновит параметр. Если URL не указан, он будет взят из 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;
    }
}

Обновить

При удалении первого параметра в строке запроса произошла ошибка, я переработал регулярное выражение и проверил, чтобы включить исправление.

Второе обновление

В соответствии с предложением @JarónBarends - проверка значения твика для проверки неопределенности и нулевого значения, позволяющего установить 0 значений

Третье обновление

Была ошибка, при которой удаление переменной строки запроса непосредственно перед тем, как хэштег терял символ хештега, которое было исправлено

Четвертое обновление

Спасибо @rooby за указание на оптимизацию регулярных выражений в первом объекте RegExp. Установите начальное регулярное выражение в ([? &]) Из-за проблемы с использованием (\? | &), Найденной @YonatanKarni

Пятое обновление

Удаление объявления хеш-переменной в операторе if/else

  • 4
    Просто проверка «истинности» value приведет к удалению переменных из строки запроса, когда вы установите их значение равным 0. Поэтому вместо if (value) {} следует использовать if (typeOf value !== 'undefined' && value !== null) {}
  • 1
    В RegExp ([? | &]) Действительно должно быть ([? &])
Показать ещё 17 комментариев
52

Для этого может быть полезной утилита URLSearchParams в сочетании с window.location.search. Например:

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

Теперь foo был установлен в bar независимо от того, существовал он или нет.

Однако указанное выше назначение window.location.search приведет к загрузке страницы, поэтому, если это нежелательно, используйте API истории следующим образом:

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

Теперь вам не нужно писать собственное регулярное выражение или логику для обработки возможного существования строк запроса.

Однако поддержка браузера плоха, поскольку она в настоящее время экспериментальна и используется только в последних версиях Chrome, Firefox, Safari, iOS Safari, Android Browser, Android Chrome и Opera. Используйте polyfill, если вы решите его использовать.

Обновление: Поддержка браузера улучшилась с момента моего первоначального ответа.

  • 0
    polly fill, is not good, невозможно Unable to set property '__URLSearchParams__:0.8503766759030615' of undefined or null reference на ie11, вы получаете эту ошибку. это не Pollyfill, если он не работает как запасной вариант.
38

Основываясь на @amateur ответе (и теперь включающем исправление из комментария @j_walker_dev), но принимая во внимание комментарий о хэш-тегах в URL-адресе, я использую следующее:

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

Отредактировано для исправления [?|&] в регулярном выражении, которое должно быть, конечно, [?&], как указано в комментариях

Изменить: Альтернативная версия для поддержки удаления URL-параметров. Я использовал value === undefined как способ указания удаления. Может использовать value === false или даже отдельный параметр ввода, как вам нужно.

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

Посмотрите на действие в https://jsfiddle.net/bp3tmuxh/1/

  • 2
    Гораздо чище. К вашему сведению для пользователей угловых UI-роутеров, которые могут иметь "?" в хеше тоже. Перемещение строки var separator вправо над возвратом исправляет ошибку с "/ app # / cool? Fun = true". Это выберет «&» в качестве разделителя, хотя реальных параметров строки запроса пока нет. Только клиентские.
  • 3
    Как указано в комментариях к другим ответам, [?|&] Должно быть просто [?&] (Иначе будет соответствовать | ).
Показать ещё 7 комментариев
21

Вот моя библиотека: https://github.com/Mikhus/jsurl

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

window.location.search - чтение/запись.

Однако - изменение строки запроса приведет к перенаправлению страницы, на которой вы находитесь, и вызвать обновление с сервера.

Если то, что вы пытаетесь сделать, это поддерживать состояние на стороне клиента (и, возможно, сделать его доступным для закладок), вам нужно изменить хеш URL вместо строки запроса, которая удерживает вас на одной странице (окно .location.hash - чтение/запись). Вот как это делают веб-сайты, такие как twitter.com.

Вы также захотите, чтобы кнопка "Назад" работала, вам нужно связать события javascript с событием изменения хэша, хороший плагин для этого http://benalman.com/projects/jquery-hashchange-plugin/

  • 3
    Твиттер больше не изменяет хэш! Хэш мертв, добро пожаловать в историю API !
  • 0
    это далеко от мертвых. я думаю, что вы живете в волшебной стране грез, где совместимость с устаревшими браузерами не имеет значения. это может иметь место для вас, но это, безусловно, не относится к остальным из нас (или на самом деле большинство из нас). возможно, смерть лучше
Показать ещё 1 комментарий
9

Здесь мой подход: функция location.params() (показана ниже) может использоваться как геттер или сеттер. Примеры:

С учетом URL-адреса http://example.com/?foo=bar&baz#some-hash,

  • location.params() возвращает объект со всеми параметрами запроса: {foo: 'bar', baz: true}.
  • location.params('foo') вернет 'bar'.
  • location.params({foo: undefined, hello: 'world', test: true}) изменит URL на http://example.com/?baz&hello=world&test#some-hash.

Вот функция params(), которая может быть назначена объекту 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('&');
};
9

Если он не установлен или не хочет обновляться с новым значением, вы можете использовать:

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

Это, кстати, простой Javascript.

ИЗМЕНИТЬ

Вы можете попробовать использовать jQuery query-object плагин

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

  • 0
    это не будет поддерживать любые другие параметры строки запроса в URL, хотя.
  • 0
    вы правы, прошу прощения .. в качестве обновления я добавил еще один вариант в свой ответ :)
Показать ещё 1 комментарий
7

Я понимаю, что этот вопрос старый и на него ответили до смерти, но здесь мой удар по нему. Я пытаюсь изобрести колесо здесь, потому что я использовал принятый в настоящее время ответ, и неправильная обработка фрагментов URL недавно укусила меня в проекте.

Функция ниже. Это довольно долго, но это было сделано, чтобы быть максимально устойчивым. Я хотел бы предложения по сокращению/улучшению. Я собрал для этого небольшой набор тестов jsFiddle (или другие подобные функции). Если функция может пройти все тесты, я бы сказал, что это хорошо.

Обновление: я наткнулся на классную функцию для использования DOM для разбора URL, поэтому я включил эту технику здесь. Это делает функцию короче и надежнее. Реквизит для автора этой функции.

/**
 * 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;
}
  • 1
    Это выглядит действительно хорошо, надежные тестовые случаи + использование DOM в качестве парсера URL. Хотя я нашел два случая: example.com/?param=val& => example.com/?param=val&&new=key --double & и example.com/team => example.com/team?new=key ожидаемо: команда /? новый = ключ какой-то редирект / команда? новый = ключ к / команда / и запросы потеряны.
  • 1
    Спасибо за провал теста. Я обновил скрипку. Этот первый жесткий. Любые идеи о том, как исправить функцию для него? Второй должен быть обработан без проблем и уже описан в тестовом наборе. Может быть, я не понимаю тебя, хотя Не стесняйтесь раскошелиться на тестовую скрипку, чтобы продемонстрировать, что вы видите.
Показать ещё 6 комментариев
6

Это мое предпочтение, и оно охватывает случаи, о которых я могу думать. Может ли кто-нибудь подумать о том, как уменьшить его до одной замены?

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

Я знаю, что это довольно старый, но я хочу запустить здесь свою рабочую версию.

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>

ПРИМЕЧАНИЕ Это модифицированная версия @elreimundo

2

Вот более короткая версия, которая заботится о

  • запрос с заданным параметром или без него
  • с несколькими значениями параметров
  • запрос, содержащий хеш

код:

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 можно найти здесь.

ПРИМЕЧАНИЕ. Это решение основано на @amateur ответе, но со многими улучшениями.

2

Основываясь на ответе @ellemayo, я придумал следующее решение, которое позволяет при необходимости отключить хэш-тег:

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

Назовите его следующим образом:

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

Результаты в:

http://my.example.com?foo=bar
  • 0
    Стилистическое толкование: typeof value !== 'undefined' && value !== null является более явным, но value != null означает то же самое и является более кратким.
2

Мой прием отсюда (совместим с "use strict", на самом деле не использует 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);
}

Пример использования:

// 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()));
});
  • 0
    отлично. благодарю вас!
1

Используйте эту функцию для добавления, удаления и изменения параметра строки запроса из URL на основе 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];
    }
}

Добавить новый и изменить существующий параметр в URL

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

Удалить существующий

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

Другой подход без использования регулярных выражений. Поддерживает "хэш-анкеры" в конце URL-адреса, а также несколько символов вопросительного знака (?). Должно быть немного быстрее, чем подход с регулярным выражением.

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

Используя jQuery мы можем сделать как ниже

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

В переменной new_url у нас будут новые параметры запроса.

Ссылка: http://api.jquery.com/jquery.param/

0

Это должно служить цели:

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

На этой странице много неудобных и излишне сложных ответов. Самый высокий рейтинг, любительский, неплохой, хотя в RegExp есть немного ненужного пуха. Вот несколько более оптимальное решение с чистым RegExp и более чистым вызовом replace:

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

В качестве дополнительного бонуса, если uri не является строкой, вы не получите ошибок при попытке вызвать match или replace на то, что может не реализовать эти методы.

И если вы хотите обработать случай хеша (и вы уже сделали проверку на правильно отформатированный HTML), вы можете использовать существующую функцию вместо написания новой функции, содержащей ту же логику:

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

Или вы можете внести небольшие изменения в @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] || '');
  }
}
  • 2
    Это последняя скобка в последней функции: var matchData = uri.match (/^([^#]*)(#.*)?$/
  • 0
    @Jammer добавлен как редактирование. Кстати, отсутствует ")" тоже.
Показать ещё 1 комментарий
0

если вы хотите сразу установить несколько параметров:

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

если jslint дает вам ошибку, добавьте это после цикла for

if(params.hasOwnProperty(key))
  • 0
    Не обрабатывает хэши или параметры, которым не присвоено значение ( http://abc.def/?a&b&c ).
0

Здесь альтернативный метод, использующий встроенные свойства элемента привязки HTML:

  • Обрабатывает многозначные параметры.
  • Невозможно изменить # фрагмент или что-то другое, кроме самой строки запроса.
  • Может быть, немного легче читать? Но это длиннее.

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

Да, у меня была проблема, когда мой запрос переполнял и дублировал, но это было связано с моей собственной медлительностью. поэтому я немного поиграл и обработал некоторые js jquery (на самом деле sizzle) и С# magick.

Итак, я понял, что после того, как сервер выполнил с переданными значениями, значения больше не имеют значения, повторного использования нет, если клиент хотел сделать то же самое, очевидно, что это всегда будет новый запрос, даже если его те же параметры передаются. И это все клиенты, поэтому некоторые кеширование/файлы cookie и т.д. Могут быть классными в этом отношении.

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>

С#:

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

Хорошо критика приветствуется (это была ночная смесь, поэтому не стесняйтесь учитывать корректировки). Если это вообще помогло, нанесите его вверх, Happy Coding.

Нет дубликатов, каждый запрос как уникальный, как вы его модифицировали, и из-за того, как это структурировано, легко добавить динамические запросы от w в dom.

0

Java script, чтобы найти конкретную строку запроса и заменить ее значение *

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

Чтобы дать пример кода для модификации window.location.search, как предложено Gal и 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;

Ещё вопросы

Сообщество Overcoder
Наверх
Меню