AJAX фильтрация каталога с товарами. Как вставить ответ на страницу?

Question

[mmka]

Как мы уже с вами знаем у товара могут быть свойства, такие как: цена, цвет, производитель и подобные. AJax запрос отправляется по выбору selecta это умею. С ajax запросами знаком. Но не получается грамотно вставить полученный ответ на страницу. И вообще когда я смотрю ответ во вкладке Network в консоли разработчика Google Chrome, то в ответ приходит целая страница то есть весь её html код. Понимаю, что можно можно вернуть в формате JSON, но как я уже говорил для меня проблема вставить ответ на страницу.

Comments

[mmka]

@Radiocity да именно

Answer 1

[Артём Лучников]

Проверяйте на стороне сервера, пришел ли обычный или XMLHTTPRequest запрос. Если пришёл XMLHTTPRequest запрос, то отдавайте не всю страницу целиком, а только то, что вам нужно заменить. Как вставить ответ на страницу думаю объяснять не надо?

Answer 2

[Алексей]

Либо вручную создавать разметку html из JSON ответа или можно использовать шаблонизаторы типа handlebars.js. Поищите по ключевым словам "javascript template engine".

Answer 3

[Alex Pro]

На скорую руку нашел видео:
YouTube
Попробуйте.
От себя скажу, что я бы лучше получал данные в формате json и через each собрал бы список для отображения
Логика:
Получили json вида -

{
   "a":{
     "price":1000,
     "size":10
   },
   "b":{
     "price":1000,
     "size":10
   },
   "c":{
     "price":1000,
     "size":10
   }
}

Далее через each (jquery) подставляем в заранее подготовленный шаблон(если шаблон не велик, то можно и без него):

$(".list-items").html('');
$.each(json, function(i, data){
     $(".list-items").append("<li><span class='price'>" + data.price + "</span><span class='size'>" + data.size + "</span></li>");
})

Это логический пример, могу описать подробнее, если не к спеху

Comments

[mmka]

@Stillborn так мне нужно заменять контент. Например я выбираю в селетке цену от 30 касарей должен товар меняться тем, у которого цена от 30 тыщ начинается.

[Alex Pro]

@mmka Я описал именно замену, в первой строке ведь обнуляю список товаров .list-items (ul) далее поочередно накидываю новые

[mmka]

@Stillborn да поспешил извини не заметил

[Alex Pro]

есть также возможность сортировать без ajax запроса, если изначально выводить все товары(без сортировки но с параметрами а-ля data-price=1000) и прятать li не соответствующие параметрам. Этот вариант вообще сведет на нет ajax запрос, но я бы наврятли выбрал такую реализацию