Javascript 缩短用于搜索和多个筛选器的查询字符串

我正在构建一个使用许多过滤器的搜索功能。我决定使用get方法而不是post（不同的原因）。问题是，当使用许多过滤器时，查询字符串变得很长，特别是当我使用同名过滤器时，所以我得到

myurl.com?filter1[]=val1&filter1[]=val2&filter2=val

为了获得更好的控制并防止0值，我尝试序列化数组：

var array = {}; 
jQuery.each(jQuery('form').serializeArray(), function(index,val) {
if (val.value != 0 )
    array[value.name] = val.value;
});

但这样，它会用最后一个值filter1覆盖第一个filter1，因此多个值不起作用。然后我就有了创建查询字符串的“问题”。我不是javascript教授，所以我需要一些帮助

我能做什么，所以我得到一个查询字符串，它看起来像：

myurl.com?filter1=val1|val2&filter2=val and so on

HTML是“普通”输入字段

<input type="checkbox" name="filter1[]" />
<input type="text" name="filter2" />

先谢谢你

鲁文这个怎么样

​
//在文档准备好之前不要做任何事情
$（函数（）{
//注册以形成提交事件
$（'form'）。提交（函数（e）{
//停止表单执行其默认操作（提交-获取）
e、 预防默认值（）；
//初始化url
var url=''；
//跟踪以前枚举的字段
var prev=''；
//迭代表单中除提交按钮外的所有字段
$（'input:not（[type=“submit”]），$（this））。每个（函数（）{
//获取此字段的名称，使用null coalesce
var name=$（this.attr（'name'）| |'；
//获取此字段的值
var val=$（this.attr（'value'）；
//此字段是否与上一个字段同名？
if（name.toLowerCase（）==prev.toLowerCase（））{
//相同的名称，因此我们已经附加了该名称
//附加值分隔符
url+=“|”；
}
否则{
//不同名称，跟踪新名称
prev=名称；
//附加参数分隔符，参数名称，等于字符
url+='&'+name+'='；
}
//附加此字段的值
url+=val；
});
//移除前导符号和
如果（url.length&&[0]='&'）{
url=url.substring（1）；
}       
//插入前导问号
url=“？”+url；
//从表单的“操作”属性插入url
url=$（this.attr（'action'）+url；
//显示url（删除此行）
警报（url）；
//重定向到新url（模拟GET）
window.location.href=url；
});
});

在我们建议如何将原始数据转换为较短的URL之前，您必须向我们展示您的原始数据。这里我假设原始数据是HTML的状态，所以我想我们需要看看HTML是什么样子。数据来自htmlI中的输入字段我认为这里一切正常，应该在PHP中得到一个很好的数组，比如$_POST['filter1']将是数组（'val1'，'val2'），为什么那么糟糕？@RuvenJR.Maerson-我不清楚您是如何从HTML中为同一个过滤器名称获取多个值的，这是您要我们帮助解决的问题的一部分。我们不知道您的页面是什么样子，您要求我们解决一个需要这些信息的问题。我们现在所能做的就是猜测。具体而准确的答案需要查看您所问问题的实际HTML。

jQuery.each（jQuery（'form'）.serializeArray（），function（index，val）{…}）
.serializeArray（）
返回一个字符串和
$。字符串上的每个
都是无意义的。你唯一现实的希望是发帖，而不是得到。伙计，你是最棒的。我真的不明白你的代码，但这就是我要找的。也许你能解释一下？那就太好了，所以我更明白一点。啊，现在我更明白了。我想我在javascript方面学到了很多东西。非常感谢您的服务。
<form action="search.html">
    <input type="text" value="val1" name="filter1" />
    <input type="text" value="val2" name="filter1" />
    <input type="text" value="val" name="filter2" />
    <input type="submit" value="search" name="cmdSearch" />
</form>
​
<script>
    // don't do anything until document is ready
    $(function() {

        // register to form submit event
        $('form').submit(function(e){

            // stop the form from doing its default action (submit-GET)
            e.preventDefault();

            // initialise url
            var url = '';

            // keep track of previously enumerated field
            var prev = '';      

            // iterate all fields in the form except the submit button(s)
            $('input:not([type="submit"])', $(this)).each(function(){

                // get the name of this field, with null coalesce
                var name = $(this).attr('name') || '';

                // get the value of this field
                var val = $(this).attr('value');

                // does this field have the same name as the previous?
                if (name.toLowerCase() == prev.toLowerCase()) {

                    // same name therefore we have already appended the name
                    // append value separator
                    url += '|';
                }
                else {

                    // different name, track new name
                    prev = name;

                    // append parameter separator, parameter name, equals char
                    url += '&' + name + '=';
                }

                // append value of this field         
                url += val;
            });

            // removing leading ampersand
            if (url.length && [0] == '&') {
                url = url.substring(1);            
            }       

            // insert leading question mark
            url = '?' + url;

            // insert url from "action" attribute of the form
            url = $(this).attr('action') + url;

            // display url (delete this line)
            alert(url);

            // redirect to the new url (simulates the GET)
            window.location.href = url;
        });
    });
</script>