Как использовать jquery для управления строкой запроса

у меня есть раскрывающийся список выбора с идентификаторами, сопоставленными со значениями. В событии onChange я хочу перенаправить на тот же url, но с "id=value", добавленным к строке запроса.

Как проверить, что этот параметр " id " еще не находится в строке запроса (я не хочу несколько значений) и заменить / добавить по мере необходимости.

Как проверить, если'? уже в querystring и добавить к URL-адресу, если его нет.

есть ли простой способ с jquery сделать это?

Он должен сделать что-то похожее под капотом для $().ajax(url, {options}) звонки. Я надеялся, что смогу просто сделать $().redirect( url, { id : $(this).val() }) или somesuch.

спасибо заранее.

Примечание. На этой странице может быть или не быть передано несколько различных параметров запроса (которые устанавливают значения по умолчанию для других параметров формы), поэтому замена всей строки запроса не является опцией.

<html>
<head><script type="text/javascript" src="/jquery-1.3.2.min.js"></script></head>
<body>
  <script>
    $(function(){                                                                                                                                         
        $('#selector').change(function(){                                                                                                                 
            // problem if 'id' option already exists
            var url = location.href + '?;id=' + $(this).val();                                                                                            
            location.assign( url );
        });                                                                                                                                               
    });                                                                                                                                                   
  </script>

  <a href="#" onclick="location.assign( location.pathname )">reset</a>                                                                                      
  <form>                                                                                                                                                    
    <select id='selector' name='id'>                                                                                                                      
        <option value='1'>one</option>                                                                                                                    
        <option value='2'>two</option>                                                                                                                    
        <option value='3'>three</option>                                                                                                                  
    </select>                                                                                                                                             
  </form>
</body>
</html>
8
jquery query-string url

6 ответов

в итоге я с соответствует выражению заменить параметры. на jQuery.парам берет хэш и serialises его окружения QUERY_STRING но он не обеспечивает обратного (разбивая query_string).

// put function into jQuery namespace
jQuery.redirect = function(url, params) {

    url = url || window.location.href || '';
    url =  url.match(/\?/) ? url : url + '?';

    for ( var key in params ) {
        var re = RegExp( ';?' + key + '=?[^&;]*', 'g' );
        url = url.replace( re, '');
        url += ';' + key + '=' + params[key]; 
    }  
    // cleanup url 
    url = url.replace(/[;&]$/, '');
    url = url.replace(/\?[;&]/, '?'); 
    url = url.replace(/[;&]{2}/g, ';');
    // $(location).attr('href', url);
    window.location.replace( url ); 
};

затем в html

$('#selector').change(function(){ 
   $.redirect( location.href, { id : $(this).val() })
})

спасибо всем, кто ответил.

10

задание window.location.search обновит строку запроса url-адреса (и перезапишет значение, если оно уже выходит)

$('#selector').change(function(){  
  window.location.search = "id=" + $(this).val();
});
6

на основе ответа CoffeeMonster:

существует проблема, когда расположение.href содержит хэш-части:

www.example.com#hash становится www.example.com#hash?id=whatever что приводит к ?id=whatever не интерпретируется сервером.

исправлено путем удаления хэш-части url:url.split("#")[0];

// put function into jQuery namespace
jQuery.redirect = function(url, params) {

    url = url || window.location.href || '';
    url = url.split("#")[0];
    url =  url.match(/\?/) ? url : url + '?';

    for ( var key in params ) {
        var re = RegExp( ';?' + key + '=?[^&;]*', 'g' );
        url = url.replace( re, '');
        url += ';' + key + '=' + params[key]; 
    }  
    // cleanup url 
    url = url.replace(/[;&]$/, '');
    url = url.replace(/\?[;&]/, '?'); 
    url = url.replace(/[;&]{2}/g, ';');
    // $(location).attr('href', url);
    window.location.replace( url ); 
};

теперь www.example.com#hash становится www.example.com?id=whatever

6

это работает как шарм: 

jQuery.redirect = function( url ) {
   window.location.replace( url );  
};
$( "#selector" ).change( function() {
    var href = window.location.href.substring( 0, window.location.href.indexOf( '?' ) );
    $.redirect( href + '?id=' + $( this ).val() );
} );
2

попробуйте использовать функцию split:

var url = location.href.split('?')[0] + '?;id=' + $(this).val();

split возвращает список, состоящий из строки, разделенной на строку (например,'?'), с этой строки удалены.

1

Я подозреваю, что якобы решение не работает с конкретными именами переменных. Особенно строчка:

RegExp( ';?' + key + '=?[^&;]*', 'g' )

Если ключ-это последовательность символов, присутствующая в другом месте строки запроса, это вхождение также будет ошибочно заменено (попробуйте одну букву, например "a"). Это связано с тем, что регулярное выражение оставляет границы строк открытыми (ведущие ';' и конечные '=' являются необязательными). Может быть, эпксрессия должна быть чем-то вроде:

RegExp( '[;&]' + key + '=?[^&;]*', 'g' )

хотя я не проверял еще.

0