Кнопка «Показать еще» на 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>

$('#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>