Кнопка "Показать еще" на ajax. Подгрузка контента

Введение

Кнопка 'Показать еще' на ajax. Подгрузка контента В этой статье будет рассмотрена возможность реализации, наверняка, всем известного функционала — ajax подгрузка данных с сервера. Работу такого функционала хорошо демонстрирует кнопка «Показать еще», которая без перезагрузки страницы получает данные с сервера и отображает их на странице. Для примера можно выводить, например, новости. Как раз дамп тестовой таблицы новостей у меня есть в статье Пагинатор. Постраничный вывод данных на php.

Кнопка «Показать еще» на ajax. Код

Начнем, с того что подготовим базу данных, создадим таблицу с новостями и заполним ее тестовыми данными, можете воспользоваться sql дампом:

-- создание таблицы tbl_news
CREATE TABLE IF NOT EXISTS `tbl_news` (
  `id` int(10) NOT NULL AUTO_INCREMENT,
  `title` varchar(255) NOT NULL,
  `small_text` varchar(255) NOT NULL,
  `big_text` text NOT NULL,
  `date_create` timestamp NOT NULL DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP,
  `is_active` tinyint(1) NOT NULL,
  PRIMARY KEY (`id`)
) ENGINE=InnoDB AUTO_INCREMENT=1 DEFAULT CHARSET=utf8;

-- заполнение таблицы тестовыми записями
INSERT INTO `tbl_news` (`id`, `title`, `small_text`, `big_text`, `date_create`, `is_active`) VALUES
	(1, 'Новость 1', 'короткое описание 1', 'полный текст', '2014-01-18 17:36:02', 1),
	(2, 'Новость 2', 'короткое описание', 'полный текст', '2014-01-18 17:36:02', 1),
	(3, 'Новость 3', 'короткое описание', 'полный текст', '2014-01-18 17:36:25', 1),
	(4, 'Новость 4', 'короткое описание', 'полный текст', '2014-01-18 17:36:02', 1),
	(5, 'Новость 5', 'короткое описание', 'полный текст', '2014-01-18 17:36:02', 1),
	(6, 'Новость 6', 'короткое описание', 'полный текст', '2014-01-18 17:36:50', 1),
	(7, 'Новость 7', 'короткое описание', 'полный текст', '2014-01-18 17:36:52', 1),
	(8, 'Новость 8', 'короткое описание', 'полный текст', '2014-01-18 17:36:55', 1),
	(9, 'Новость 9', 'короткое описание', 'полный текст', '2014-01-18 17:36:57', 1),
	(10, 'Новость 10', 'короткое описание', 'полный текст', '2014-01-18 17:37:01', 1),
	(11, 'Новость 11', 'короткое описание', 'полный текст', '2014-01-18 17:37:04', 1);

Также стоит создать файл, в котором будет реализовано подключение к базе данных, назовем его db.php:

	define("HOST", "localhost");
	define("USER", "root");
	define("PASSWORD", "");
	define("DB_NAME", "test_db");
	$db_connect = mysql_connect(HOST, USER, PASSWORD, TRUE); 
	mysql_selectdb(DB_NAME,$db_connect);
	mysql_set_charset('utf8');

Теперь необходимо написать серверный скрипт, к которому мы будем обращаться через ajax, и назовем его ajax.php:

include "db.php"; // подключение к базе данных

$countView = (int)$_POST['count_add']; 	// количество записей, получаемых за один раз
$startIndex = (int)$_POST['count_show']; // с какой записи начать выборку

// запрос к бд
$sql = mysql_query("
	SELECT * FROM `tbl_news` LIMIT $startIndex, $countView
") or die(mysql_error());
$newsData = array();
while($result = mysql_fetch_array($sql, MYSQL_ASSOC)){
	$newsData[] = $result;
}

if(empty($newsData)){
	// если новостей нет
	echo json_encode(array(
		'result' 	=> 'finish'
	));
}else{
	// если новости получили из базы, то сформируем html элементы
	// и отдадим их клиенту
	$html = "";
	foreach($newsData as $oneNews){
		$html .= "
			<div>
				<b>{$oneNews['title']}</b>
				<p>{$oneNews['small_text']}</p>
			</div>
		";
	}
	echo json_encode(array(
		'result' 	=> 'success',
		'html'		=> $html
	));
}

Ну и самое последнее — это js код и верстка.

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Кнопка "Показать еще" на ajax</title>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"  type="text/javascript"></script>
	
	<style>	
	
	</style>
	
    <script>
        $(document).ready(function(){
		
            $('#show_more').click(function(){
		var btn_more = $(this);
		var count_show = parseInt($(this).attr('count_show'));
		var count_add  = $(this).attr('count_add');
		btn_more.val('Подождите...');
				
		$.ajax({
                    url: "ajax.php", // куда отправляем
                    type: "post", // метод передачи
                    dataType: "json", // тип передачи данных
                    data: { // что отправляем
                        "count_show":	count_show,
                        "count_add":	count_add
                    },
                    // после получения ответа сервера
                    success: function(data){
			if(data.result == "success"){
			    $('#content').append(data.html);
		            btn_more.val('Показать еще');
		            btn_more.attr('count_show', (count_show+3));
			}else{
			    btn_more.val('Больше нечего показывать');
			}
                    }
                });
            });
			
        });		
    </script>
	
</head>
<body>
	<div id="content">
		<?php
			// выведем в самом начале 5 статей
			include "db.php";
			
			$sql = mysql_query("
				SELECT * FROM `tbl_news` LIMIT 5
			") or die(mysql_error());
			$newsData = array();
			while($result = mysql_fetch_array($sql, MYSQL_ASSOC)){
				$newsData[] = $result;
			}			
			foreach($newsData as $oneNews): 
		?>
		<div>
			<b><?=$oneNews['title'];?></b>
			<p><?=$oneNews['small_text'];?></p>
		</div>
		<?php endforeach; ?>
	</div>
	
	<input id="show_more" count_show="5" count_add="3" type="button" value="Показать еще" />
</body>
</html>

На этом все. Скачать исходники можно — тут.

Кнопка «Показать еще» на ajax. Подгрузка контента: 7 комментариев

Как Вы решили вопрос с комментариями и подгрузкой комментариев к комментариям=)

Ответить

Отличная статья, все ясно и понятно.

Ответить

Доброе время суток, у меня такой вопрос, хотелось бы к новостям добавить картинки. То есть чтоб в ленте показывалась одна картинка, а при открытии новости еще несколько картинок. Не подскажите как это реализовать. За ранее благодарю.

Ответить

Спасибо за отличную статью.

Подскажите пожалуйста, реализовал каталог, выводятся товары по категориям, а кнопка «показать еще», соответственно перестала работать.
Понимаю что нужно передать в обработчик параметр выбранной категории, но не могу понять, где его нужно подставить, подскажите пожалуйста? Благодарю!

Ответить

Алексей:

19.12.2016 в 23:10

Меняем скрипт

$(document).ready(function(){
$(‘#show_more’).click(function(){
var btn_more = $(this);
var count_show = parseInt($(this).attr(‘count_show’));
var count_add = $(this).attr(‘count_add’);
var id_catalog = $(this).attr(‘id_catalog’); // параметр категории

btn_more.val(‘Подождите…’);

$.ajax({
url: «ajax.php», // куда отправляем
type: «post», // метод передачи
dataType: «json», // тип передачи данных
data: { // что отправляем
«count_show»: count_show,
«count_add»: count_add,
«id_catalog»: id_catalog // параметр категории
},
// далее как в исходнике
…….

************************************
Кнопку

***********************************
В ajax.php добавляем строку

$id_catalog= $_POST[‘id_catalog’]; // параметр категории

**************************************

Ответить
1. Алексей:
  
  19.12.2016 в 23:13
  
  про кнопку почему-то не отобразилось
  
  Ответить

Здравствуйте.
Столкнулся с такой проблемой:
Мне нужно выводить из бд три категории (описание теги и изображение)
когда я вывожу данные из всей бд:
SELECT * FROM sok LIMIT $startIndex, $countView
— все отлично работает, выводятся все три категории
когда я вывожу данные вычленяя только по одному тегу
SELECT * FROM sok WHERE tags LIKE ‘%полиграфия%’ LIMIT $startIndex, $countView
— выводится описание и теги, а изображение нет
как вы думаете, в чем может быть проблема?
разница только в «WHERE tags LIKE ‘%полиграфия%'»

Ответить

Введение

Кнопка «Показать еще» на ajax. Код

Кнопка «Показать еще» на ajax. Подгрузка контента: 7 комментариев

Добавить комментарий Отменить ответ