UniSite CMS - Современный движок для Ваших сайтов.

ZHUR ARTUR.ru

Персональный блог по созданию
мощных и современных Web-Проектов!

Лучше удивить всех своими результатами, чем постоянно рассказывать о своих планах! © Жизнь

»

Введите код полученный после подписки

  • 8

  • 0

Загрузка контента без перезагрузки страницы с помощью Ajax и PHP

Автор - Жур Артур | Добавлено - 2014-04-30 | Просмотров - 10480 | Скачено - 100

1Создание каркаса для контента.


  • <div class="image" > Блок с картинкой.
  • <div style="clear: both;" ></div> Блок со свойством clear: both, служит для отмены обтекания, нужен для того, чтобы при добавлении картинок основной блок растягивался
#block-content div.image{
    width: 250px;
    height: 150px;
    float: left;
    margin-left: 10px;
    margin-top: 10px;
    overflow: hidden;
}
#content-load{
    border: 1px solid #E5E5E5;
    background-color: #EEEEEE;
    display: inline-block;
    font: 13px sans-serif;
    padding: 4px 15px;
    margin-top: 15px;
    cursor: pointer;
}

2Создаём кнопку по нажатию которой будут загружаться картинки.

Ещё...

Стили для кнопки

#content-load{
    border: 1px solid #E5E5E5;
    background-color: #EEEEEE;
    display: inline-block;
    font: 13px sans-serif;
    padding: 4px 15px;
    margin-top: 15px;
    cursor: pointer;
}

В результате должно получиться так:

Ещё...

3JQuery код для загрузки картинок

Первым нужно подключить плагин JQuery, скачать его можно тут. Разместите его на ваш сайт и подключите к страницам. Без этого плагина JQuery код работать не будет!

Подключение плагина


JQuery код загрузки картинок

Данный код разместите у себя на странице в тегах <head> или добавте его в отдельный js файл.

$(document).ready(function(){

 var page = 1; // По умолчанию стоит первая страница.

 // Определяем нажатие на кнопку "Ещё..."
 $('#content-load').click(function(){
    
  page++; // Увеличиваем значение на еденицу, в итоге получиться загрузка картинок со второй страницы.

 // Отправляем номер страницы в обработчик
 $.ajax({
  type: "POST",
  url: "/load_images.php", // Обработчик
  data: "page="+page, // Переменная с номером страницы
  dataType: "html",
  cache: false,
  beforeSend: function(){
    $('#content-load').html('Загружаю...'); // Изменяем надпись кнопки на "Загружаю..."
  },
  success: function(data) {  
  
  // Проверяем что ответил нам обработчик, если 0 значит товары кончились, если нет, то вставляем их в блок #block-content
  if (data == "0")
  {
    $('#content-load').html('Пусто!'); // Изменяем надпись кнопки на "Пусто!"

  }else
  {
    $(data).appendTo("#block-content"); // Вставка новых картинок после старых
    $('#content-load').html('Ещё...'); // Изменяем надпись кнопки на "Ещё..."
  }}
});});
      
});	

После нажатия на кнопку с id content-load будет отправляться запрос в обработчик и будут отправляться данные которые вы укажите в data. В нашем случае в обработчик будет отправляться номер страницы по которому обработчик будет определять какие картинки нужно отправить обратно, чтобы не выводились одни и теже картинки. В url указываем обработчик. Success хранит ответ обработчика с помощью переменной data принимаем картинки которые отправит нам обработчик и проверяем если переменная data равняется НУЛЮ, то значит картинки кончились, а если не равняется нулю значит нужно вывести картинки. Указываем appendTo - это значить Добавить к . Указываем куда будем добавлять, а добавлять будем в наш основной блок #block-content.

По умолчанию в переменную page указываем 1, это номер страницы по умолчанию. Page++ - По каждому нажатию на кнопку в этой переменной будет увеличиваться значение на одну еденицу и тем самым будет увеличиваться номер страницы.

5Обработчик

Создайте php файл и поместите в него нижепредставленный код, этот php файл и будет обработчик, назовите его load_images.php или как-то по своему и разместите его в корень сайта или в отдельную папку.


// Подключение к БД  
include('db_connect.php');

// Выводить по:    
$num = 6;
// Извлекаем из POST текущую страницу
$page = (int)$_POST['page']; 
// Определяем общее число картинок в базе данных
$count = mysql_query("SELECT COUNT(*) FROM blog_pictures",$link);
$temp = mysql_fetch_array($count);
// Заносим общее кол-во картинок в переменную
$posts = $temp[0];
// Находим общее число страниц
$total = (($posts - 1) / $num) + 1;
$total =  intval($total);
// Определяем начало картинок для текущей страницы
$page = intval($page);
// Вычисляем начиная с какого номера следует выводить картинки
$start = $page * $num - $num;
// Выбираем $num картинок начиная с номера $start    


// Если страница меньше или равна общему количеству страниц, то выводим картинки, если нет, то не выводим.
if ($page <= $total)
{

// Запрос в Базу данных на вывод картинок, $start - с какой страницы выводить,$num - сколько выводить.   
$result = mysql_query("SELECT * FROM blog_pictures ORDER By id DESC LIMIT $start, $num",$link);

// Если картинки есть.
If (mysql_num_rows($result) > 0)
{
// Массив с картинками    
$row = mysql_fetch_array($result);
// Выводим картинки циклом.
do
{
        
echo '

'; } while ($row = mysql_fetch_array($result)); echo '
'; }else { echo '0'; } }else { echo '0'; }

Первое идёт в обработчике это постраничная навигация с помощью которой идёт разбивка картинок на страницы. Дальше идёт запрос в базу данных на вывод картинок. Вывод картинок идёт с таблицы blog_pictures. Создайте эту таблицу, назвать её можете по своему и добавте туда пути к картинкам, которые нужно выводить.

Интересное

Комментарии