Ajax-подгрузка контента
Здравствуйте, уже третий день ломаю голову нечего не получается
Делаю Ajax-подгрузку контента при прокрутке страницы, Все работает если выводить контент из одной таблицы, но не как не получается подключить другие таблицы связаны с контентом например комментарий. Для примера как Фасебуке 1. Пост 2. Комментарий (2-3 шт.) И т.д. Вот код: /* Переменная-флаг для отслеживания того, происходит ли в данный момент ajax-запрос. В самом начале даем ей значение false, т.е. запрос не в процессе выполнения */ var inProgress = false; / С какой статьи надо делать выборку из базы при ajax-запросе / var startFrom = 10; /* Используйте вариант $('#more').click(function() для того, чтобы дать пользователю возможность управлять процессом, кликая по кнопке "Дальше" под блоком статей (см. файл index.php) */ $(window).scroll(function() { /* Если высота окна + высота прокрутки больше или равны высоте всего документа и ajax-запрос в настоящий момент не выполняется, то запускаем ajax-запрос */ if($(window).scrollTop() + $(window).height() >= $(document).height() && !inProgress) { $.ajax({ /* адрес файла-обработчика запроса */ url: '../obrabotchik.php', /* метод отправки данных */ method: 'POST', /* данные, которые мы передаем в файл-обработчик */ data: {"startFrom" : startFrom}, /* что нужно сделать до отправки запрса */ beforeSend: function() { /* меняем значение флага на true, т.е. запрос сейчас в процессе выполнения */ inProgress = true;} /* что нужно сделать по факту выполнения запроса */ }).done(function(data){ /* Преобразуем результат, пришедший от обработчика - преобразуем json-строку обратно в массив */ data = jQuery.parseJSON(data); /* Если массив не пуст (т.е. статьи там есть) */ if (data.length > 0) { /* Делаем проход по каждому результату, оказвашемуся в массиве, где в index попадает индекс текущего элемента массива, а в data - сама статья */ $.each(data, function(index, data){ /* Отбираем по идентификатору блок со статьями и дозаполняем его новыми данными */ $("#articles3a").append("<p><b>" + data['0']+ "</b><br />" + data['2'] + "</p>" + "<i>" +"</i>" ); //$("#articles3a").append("<p><b>" + data['3']+ "</b><br />" ); }); /* По факту окончания запроса снова меняем значение флага на false */ inProgress = false; // Увеличиваем на 10 порядковый номер статьи, с которой надо начинать выборку из базы startFrom += 10; }}); } }); |
А при чем тут ajax-запрос? От прост как дубина - отправляешь запрос с параметрами(например номер страницы) - в ответ получаешь html\json в зависимости от архитектуры проекта, и вставляешь в документ.
Все остальное - генерация html, запросы к бд делается на сервере |
Часовой пояс GMT +3, время: 15:14. |