Как правильно сделать ajax запрос?

Question

[Сергей Хлопов]

Здравствуйте, подскажите пожалуйста как правильно выполнить ajax запрос, просто вот у меня есть checkbox-ы

и при выборе checkbox отправляется ajax запрос, суть в том что допустим когда мы выбрали
Atlas Concore у нас отправился массив на сервере с одним элементом Atlas Concore
Затем выбираем FAP и у нас отправляется массив с Atlas Concore и FAP а затем выбираем Vitra и у нас отправляется Atlas Concore, FAP, и Vitra, не знаю вот насколько верно это.. просто вот на сервере я буду получать товары по этим выбранным категориям, и получается что Atlas Concore я буду получать 3 раза.
Подскажите пожалуйста вообще нормально ли такой ajax запрос использовать, или же нужно по другому ? Заранее благодарю за ответ.
Код Ajax запроса:

$(".listCatigor input, .stylelistliGet input, .listStylePowerx input, .liststyleColor input").change(function() {
		var IdCheck;
		var arrCheck = [];
		var arrCheckStyle = [];
		var arrCheckPowerx = [];
		var arrCheckColor = [];
		 $('.listCatigor input:checkbox:checked').each(function(){
			IdCheck = $(this)["0"].attributes[1].value;
			arrCheck.push($('label[for='+ IdCheck + ']').text());
		});
		 $('.stylelistliGet input:checkbox:checked').each(function(){
			IdCheck = $(this)["0"].attributes[1].value;
			arrCheckStyle.push($('label[for='+ IdCheck + ']').text());
		});
		$('.listStylePowerx input:checkbox:checked').each(function(){
			IdCheck = $(this)["0"].attributes[1].value;
			arrCheckPowerx.push($('label[for='+ IdCheck + ']').text());
		});
		$('.liststyleColor input:checkbox:checked').each(function(){
			IdCheck = $(this)["0"].attributes[1].value;
			arrCheckColor.push($('label[for='+ IdCheck + ']').text());
		});
		objectAjaxToPhp = new Object();
		objectAjaxToPhp.ArrayCheck = arrCheck;
		objectAjaxToPhp.ArrayCheckStyle = arrCheckStyle;
		objectAjaxToPhp.ArrayCheckPowerx = arrCheckPowerx;
		objectAjaxToPhp.ArrayCheckColor = arrCheckColor;
		$.ajax({
			type: "POST",
			dataType: "html",
			url: "/assets/template/php/activefilter.php",
			data: {"ObjAjax": objectAjaxToPhp},
			success: function(msg) {
			}
		});
	});

Answer 1

[Kudis]

Что, точно, нужно сделать:
1. Всем чекбоксам дать один класс, например js-checkbox
2. Присвоить каждому чекбоксу name
3. Если name не уникальна между групп, то ввести data-атрибут с названием группы
4. Установить период ожидания между запросами

т.е. каждый чекбокс будет выглядеть так:

<input class="js-checkbox" type="checkbox" id="<Уникальный ID>" name="<Название свойства>" data-type="<Название группы>" value="true" />
<label for="<Уникальный ID чекбокса>">Лэйбл</label>

например:

<input class="js-checkbox" type="checkbox" id="check_atlas_concore" name="atlas_concore" data-type="ArrayCheck" value="true" />
<label for="check_atlas_concore">Atlas Concore</label>

тогда всё будет работать так:

var timer = null;

function pushData()
{
    var data = {};
    var checkedBoxes = $('.js-checkbox:checked');
    var checkedBoxesQ = checkedBoxes.length;

    checkedBoxes.each(function(){
        var item = {};
        item[this.name] = true;
        data[$(this).data('type')] = item;

        if (!--checkedBoxesQ) {
            $.ajax({
                type: 'POST',
                url: '',
                data: data,
                success: function(msg) {
                }
            });
        }
    });
}


$('.js-checkbox').on('change', function(){
    clearTimeout(timer);
    timer = setTimeout(pushData, 1000);
});

но, лучше всего обернуть весь фильтр в форму, например с id myFilter
а в name каждого чекбокса включить название группы
например:

<input class="js-checkbox" type="checkbox" id="check_atlas_concore" name="ArrayCheck[atlas_concore]" value="true" />
<label for="check_atlas_concore">Atlas Concore</label>

тогда pushData будет выглядеть ещё лаконичнее:

function pushData()
{
    $.ajax({
        type: 'POST',
        url: '',
        data: $('#myFilter').serialize(),
        success: function(msg) {
        }
    });
}

Comments

[Сергей Хлопов]

Понятно, благодарю Вас за ответ. Сейчас буду разбираться