使用 jquery 在 URL 中插入搜索参数答案

【问题标题】：Use jquery to insert search parameters in URL使用 jquery 在 URL 中插入搜索参数
【发布时间】：2012-09-01 16:29:31
【问题描述】：

我有一些不同的搜索参数，它们在不同的类别中可以是动态的。我的问题是，我需要使用 jquery 来检查是否有点击复选框，然后更改 URL 以便插入参数。

我的一个搜索参数框的 HTML 是：

<h3>{heading}</h3>
<div class="{class} {parameter} searchParam" name="class">
    <ul>
        <li><input type="checkbox" name="{name}" value="{value}" />{value}</li>
    </ul>
</div>

每个参数都有“searchParam”作为类 - 其他参数是动态的。

我需要为每个 .searchParam 创建一个 URL 部分，以便例如3 个搜索参数检查了值（li 中的输入），那么 URL 将是这样的：

http://domain.com/param1=value1,value2,value3.param2=value1,value2.param2=value1

这可能吗？

【问题讨论】：

您要更新当前页面URL中的搜索参数吗？你意识到这会触发页面加载/刷新吗？
大卫：是的，我已经想到了。我认为这是最好的方法 - 我可以通过 ajax 加载它，但我认为这可能会给页面上的记录数量带来一些问题。所以我决定继续重新加载页面:)
您究竟为什么要这样做？您可以使用location.hash 将参数放在url 栏中而无需重新加载页面，但它们会出现在# 之后。
我不能使用 # 我认为.. 与我的 PHP 路由有关.. 但我想这样做，因为我无法添加到参数。可以说它已经是： size=43,44 并且我检查了“45”-那么您如何设置 size=43,44,45 ？ :-) 这是我目前的问题

标签： jquery parameters search-engine

【解决方案1】：

我是这样解决的：

$(document).ready( function() {
        var params = [];

        $(".searchParam").click(function(){
            params = [];
            $(".searchParam").each(function(index){
                var name = $(this).attr('name');
                var values = $('.'+ name +' input:checkbox:checked').map(function (){ return this.value }).get();

                if(values.length > 0){
                    params.push({'name': name, 'values': values }); 
                }           
            });

            var curUrl = $(location).attr('href');
            var newUrl = curUrl.split('/');
            var urlNumPar = newUrl.length - 1;

            var redirectURL = '';

            $(newUrl).each(function(index, val){
                if( index == urlNumPar)
                {
                } else {
                    redirectURL += val+"/";
                }
            });

            $(params).each(function(index, val){
                if(params.length > 1 && index > 0)
                {
                    redirectURL += ".";
                }
                redirectURL += val['name'] + "=" + val['values'];
            });

            window.location.href = redirectURL;
        });
    });

【讨论】：