реализовать измененные фильтры / параметры поиска в сетке данных, используя ajax

Question

Допустим, у меня есть какая-то сетка данных, и я хочу добавить пару цепочек фильтров, как на этом сайте: http://www.yelp.com/search?find_desc=bar&ns=1&find_loc=Minneapolis%2C+MN (сортировка по расстоянию, цене и т. д.).

Каждый раз, когда пользователь щелкает ссылку фильтра, он соответствующим образом обновляет содержимое сетки данных. Но мне также нужно обновить ссылки в других фильтрах, чтобы учесть изменения. Пример: если я изменю поле заказа, мне нужно добавить / обновить ?order_field=x во всех других ссылках фильтров.

Какой, по вашему мнению, лучший способ реализовать такой сценарий? Должен ли я создать функцию, которая при нажатии на ссылку фильтра обновляет параметры строки запроса всех других фильтров? Или использовать скрытые поля для записи выбранной опции в каждом фильтре?

Я бы хотел многоразового решения, если это возможно.

Answer 1

Поскольку данные загружаются через AJAX, не должно быть никаких ссылок для обновления - по крайней мере, если вы имеете в виду якорные теги <a>.Вам даже не нужно хранить фильтры в скрытом поле.

Я бы сохранил все фильтры как объект JSON.В зависимости от того, как настроен ваш API, вам может потребоваться преобразовать объект JSON во что-то, пригодное для использования вашим API, или вы даже сможете передать объект JSON непосредственно в запросе $.ajax.

ЭтоВ примере кода предполагается, что у вас есть текстовое поле с id="price" в разметке.Я намеренно оставил convert_filters_to_parameters пустым, потому что вы не предоставили никаких подробностей относительно вашего API.jQuery, в свою очередь, сериализует эти параметры в запрос GET или POST, прежде чем отправит их.

var filters = { 
    distance:null,
    price:null,
    sortBy:'distance'
}

//this assumes you have a textbox with id="price" 
$('#price').changed(function()
{
    filters.price = $(this).val();
    refresh_data();
});

function refresh_data()
{
    var parameters = convert_filters_to_parameters(filters);
    $.ajax('/my_api', 
            {
                //i left out a lot of properties here for brevity
                data: parameters,
                success: function(response) { alert(response); }
            });
}