2

多くのフィルターを使用する検索機能を構築しています。postの代わりにgetメソッドを使用することにしました（さまざまな理由）。問題は、多くのフィルターを使用すると、クエリ文字列が非常に長くなることです。特に、同じ名前のフィルターを使用すると、次のようになります。

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

より良い制御を得て、0の値を防ぐために、私はserializeArrayを試しました：

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

前もって感謝します

ルーヴェン

4

1 に答える 1

1

これはどうですか（作業デモ）：

<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>
于 2012-12-29T13:32:23.613 に答える