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

Как мы уже с вами знаем у товара могут быть свойства, такие как: цена, цвет, производитель и подобные. AJax запрос отправляется по выбору selecta это умею. С ajax запросами знаком. Но не получается грамотно вставить полученный ответ на страницу. И вообще когда я смотрю ответ во вкладке Network в консоли разработчика Google Chrome, то в ответ приходит целая страница то есть весь её html код. Понимаю, что можно можно вернуть в формате JSON, но как я уже говорил для меня проблема вставить ответ на страницу.
  • Вопрос задан
  • 5899 просмотров
Пригласить эксперта
Ответы на вопрос 3
Проверяйте на стороне сервера, пришел ли обычный или XMLHTTPRequest запрос. Если пришёл XMLHTTPRequest запрос, то отдавайте не всю страницу целиком, а только то, что вам нужно заменить. Как вставить ответ на страницу думаю объяснять не надо?
Ответ написан
Комментировать
MAKAPOH
@MAKAPOH
многостаночник
Либо вручную создавать разметку html из JSON ответа или можно использовать шаблонизаторы типа handlebars.js. Поищите по ключевым словам "javascript template engine".
Ответ написан
Комментировать
Stillborn
@Stillborn
web-developer, web-designer
На скорую руку нашел видео:
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>");
})


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

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы