Question

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

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

Problemslm：在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()发送到服务器端，如

{rooms: [1,2]}

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

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

，MySQL查询可以像

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

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

Answer 1

由于表单元素没有serializeArray属性，因此name方法返回空数组。

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

如果您想重置表单值，可以使用JavaScript reset方法。

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

如果单击“应用设置”按钮，则保存表单数据，否则还原为旧数据

更新

1 个答案: