Question

我有一个选择下拉列表，其中id已映射到值。在onChange事件中，我想重定向到同一个url，但在查询字符串后附加了'id = value'。

如何检查此'id'选项是否已存在于查询字符串中（我不需要多个值）并根据需要替换/追加。

如何检查'？'已经在查询字符串中，如果不是，则附加到网址。

使用jquery有一个简单的方法吗？

它必须在$().ajax(url, {options})调用的引擎盖下做类似的事情。我希望我能做$().redirect( url, { id : $(this).val() })或某些事情。

提前致谢。

注意：此页面可能有或没有传入一些不同的查询选项（在其他表单选项中设置默认值），因此无法替换整个查询字符串。

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

Answer 1

我最终使用RegExp匹配来覆盖选项。 jQuery.param接受一个哈希并将其序列化为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() })
})

感谢所有回复的人。

Answer 2

基于CoffeeMonster的回答：

当location.href包含散列部分时出现问题：

www.example.com#hash变为www.example.com#hash?id=whatever，导致服务器无法解释?id=whatever。

通过删除网址的哈希部分来修复它：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

Answer 3

设置window.location.search将更新网址的查询字符串（如果已经退出则覆盖该值）

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

Answer 4

这就像一个魅力：

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

Answer 5

尝试使用拆分功能：

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

split返回一个由字符串分割的字符串组成的列表（如“？”），删除该字符串。

Answer 6

我怀疑所谓的解决方案不适用于特定的变量名称。特别是这一行：

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

如果key是查询字符串中其他位置的字符序列，那么该字符序列也会被错误地替换（尝试一个字母，例如'a'）。这是因为正则表达式使字符串边界保持打开（前导';'和尾随'='都是可选的）。也许epxression更像是：

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

虽然我还没有测试过。

如何使用jquery来操作查询字符串

6 个答案: