1

我正在使用 jQuery 制作搜索过滤器菜单。此表单包含多个表单元素，例如复选框和输入框。当用户对表单进行一些更改并单击#apply-filters按钮时，表单将被隐藏，其数据将通过 发送到服务器后端进行处理$.post()。

如果用户对表单进行了更改但没有单击#apply-filters按钮就将其关闭，则过滤器菜单div将被隐藏，并且下次用户重新打开过滤器菜单时，将显示初始设置，而不是用户所做的最新设置但未能点击#apply-filters。

问题：在 jQuery 中执行此操作的最佳方法是什么？

HTML

<form id="filter-menu">
    <input type="checkbox" id="free" name="free" /><label for="free">Free</label>
    <input type="checkbox" id="sale" name="sale" /><label for="sale">Sale</label>

    <input type="checkbox" id="rooms_1" name="rooms[]" value=1/><label for="rooms_1">1 Room</label>
    <input type="checkbox" id="rooms_2" name="rooms[]" value=2 /><label for="rooms_2">2 Rooms</label>

    <input type="text" id="price" val="100" />

    <button id="apply-filers">Apply Filters</button>
</form>

jQuery

$('#apply-filters').click(function() {
    $('#filter-menu').serializeArray();  // Gives an empty array

    $.post('api/someplace', 
            { free: 1,
            sale: 1,
            rooms: [1, 2],
            price: 100
            }, function() {
                console.log('yay');
            });
});

更新

当我做

JSON.stringify($('filter-form').serializeArray())

我明白了

[{"name":"rooms[]","value":"1"},{"name":"rooms[]","value":"2"}]"

但是我想通过$.post()like将它发送到服务器端

{rooms: [1,2]}

这样我就可以在服务器端做（PHP，在使用框架函数处理之后）

$rooms = implode(',', $rooms_array)    // gives `1,2`

MySQL查询可以像

SELECT .... WHERE rooms IN (1,2)

这可能吗？发送到服务器端的好方法是什么？另外，我将如何使用输出serializeArray()来馈入$.post()？

4

1 回答 1

1

您的serializeArray方法返回空数组，因为您的表单元素没有name属性。

<input type="checkbox" id="free" name='something' />

如果要重置表单值，可以使用 JavaScriptreset方法。

$('#close').click(function(){
    $('#something').hide()
    $("#filter-menu")[0].reset();
})

$('#apply-filters').click(function() {
     var room = $('#filter-menu input[name="rooms[]"]:checked').map(function(){
             return this.value
     }).get();  

    $.post('api/someplace', 
            { free: 1,
            sale: 1,
            rooms: room,
            price: 100
            }, function() {
                console.log('yay');
    });
});
于 2012-10-06T19:10:37.557 回答