Вход Регистрация
PHP коды | Кнопка «Показать еще» на ajax. Подгрузка контента
* Pelmeshka

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

  1. //
  2.  
  3. Начнем, с того что подготовим базу данных, создадим таблицу с новостями и заполним ее тестовыми данными, можете воспользоваться sql дампом:
  4.  
  5. -- создание таблицы tbl_news
  6. CREATE TABLE IF NOT EXISTS `tbl_news` (
  7. `id` int(10) NOT NULL AUTO_INCREMENT,
  8. `title` varchar(255) NOT NULL,
  9. `small_text` varchar(255) NOT NULL,
  10. `big_text` text NOT NULL,
  11. `date_create` timestamp NOT NULL DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP,
  12. `is_active` tinyint(1) NOT NULL,
  13. PRIMARY KEY (`id`)
  14. ) ENGINE=InnoDB AUTO_INCREMENT=1 DEFAULT CHARSET=utf8;
  15.  
  16. -- заполнение таблицы тестовыми записями
  17. INSERT INTO `tbl_news` (`id`, `title`, `small_text`, `big_text`, `date_create`, `is_active`) VALUES
  18. (1, 'Новость 1', 'короткое описание 1', 'полный текст', '2014-01-18 17:36:02', 1),
  19. (2, 'Новость 2', 'короткое описание', 'полный текст', '2014-01-18 17:36:02', 1),
  20. (3, 'Новость 3', 'короткое описание', 'полный текст', '2014-01-18 17:36:25', 1),
  21. (4, 'Новость 4', 'короткое описание', 'полный текст', '2014-01-18 17:36:02', 1),
  22. (5, 'Новость 5', 'короткое описание', 'полный текст', '2014-01-18 17:36:02', 1),
  23. (6, 'Новость 6', 'короткое описание', 'полный текст', '2014-01-18 17:36:50', 1),
  24. (7, 'Новость 7', 'короткое описание', 'полный текст', '2014-01-18 17:36:52', 1),
  25. (8, 'Новость 8', 'короткое описание', 'полный текст', '2014-01-18 17:36:55', 1),
  26. (9, 'Новость 9', 'короткое описание', 'полный текст', '2014-01-18 17:36:57', 1),
  27. (10, 'Новость 10', 'короткое описание', 'полный текст', '2014-01-18 17:37:01', 1),
  28. (11, 'Новость 11', 'короткое описание', 'полный текст', '2014-01-18 17:37:04', 1);
  29.  
  30. Также стоит создать файл, в котором будет реализовано подключение к базе данных, назовем его db.php:
  31.  
  32. define("HOST", "localhost");
  33. define("USER", "root");
  34. define("PASSWORD", "");
  35. define("DB_NAME", "test_db");
  36. $db_connect = mysql_connect(HOST, USER, PASSWORD, TRUE);
  37. mysql_selectdb(DB_NAME,$db_connect);
  38. mysql_set_charset('utf8');
  39.  
  40. Теперь необходимо написать серверный скрипт, к которому мы будем обращаться через ajax, и назовем его ajax.php:
  41.  
  42. include "db.php"; // подключение к базе данных
  43.  
  44. $countView = (int)$_POST['count_add']; // количество записей, получаемых за один раз
  45. $startIndex = (int)$_POST['count_show']; // с какой записи начать выборку
  46.  
  47. // запрос к бд
  48. $sql = mysql_query("
  49. SELECT * FROM `tbl_news` LIMIT $startIndex, $countView
  50. ") or die(mysql_error());
  51. $newsData = array();
  52. while($result = mysql_fetch_array($sql, MYSQL_ASSOC)){
  53. $newsData[] = $result;
  54. }
  55.  
  56. if(empty($newsData)){
  57. // если новостей нет
  58. echo json_encode(array(
  59. 'result' => 'finish'
  60. ));
  61. }else{
  62. // если новости получили из базы, то сформируем html элементы
  63. // и отдадим их клиенту
  64. $html = "";
  65. foreach($newsData as $oneNews){
  66. $html .= "
  67. <div>
  68. <b>{$oneNews['title']}</b>
  69. <p>{$oneNews['small_text']}</p>
  70. </div>
  71. ";
  72. }
  73. echo json_encode(array(
  74. 'result' => 'success',
  75. 'html' => $html
  76. ));
  77. }
  78.  
  79. Ну и самое последнее — это js код и верстка.
  80.  
  81. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
  82. <head>
  83. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  84. <title>Кнопка "Показать еще" на ajax</title>
  85. <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>
  86.  
  87. <style>
  88.  
  89. </style>
  90.  
  91. <script>
  92. $(document).ready(function(){
  93.  
  94. $('#show_more').click(function(){
  95. var btn_more = $(this);
  96. var count_show = parseInt($(this).attr('count_show'));
  97. var count_add = $(this).attr('count_add');
  98. btn_more.val('Подождите...');
  99.  
  100. $.ajax({
  101. url: "ajax.php", // куда отправляем
  102. type: "post", // метод передачи
  103. dataType: "json", // тип передачи данных
  104. data: { // что отправляем
  105. "count_show": count_show,
  106. "count_add": count_add
  107. },
  108. // после получения ответа сервера
  109. success: function(data){
  110. if(data.result == "success"){
  111. $('#content').append(data.html);
  112. btn_more.val('Показать еще');
  113. btn_more.attr('count_show', (count_show+3));
  114. }else{
  115. btn_more.val('Больше нечего показывать');
  116. }
  117. }
  118. });
  119. });
  120.  
  121. });
  122. </script>
  123.  
  124. </head>
  125. <body>
  126. <div id="content">
  127. <?php
  128. // выведем в самом начале 5 статей
  129. include "db.php";
  130.  
  131. $sql = mysql_query("
  132. SELECT * FROM `tbl_news` LIMIT 5
  133. ") or die(mysql_error());
  134. $newsData = array();
  135. while($result = mysql_fetch_array($sql, MYSQL_ASSOC)){
  136. $newsData[] = $result;
  137. }
  138. foreach($newsData as $oneNews):
  139. ?>
  140. <div>
  141. <b><?=$oneNews['title'];?></b>
  142. <p><?=$oneNews['small_text'];?></p>
  143. </div>
  144. <?php endforeach; ?>
  145. </div>
  146.  
  147. <input id="show_more" count_show="5" count_add="3" type="button" value="Показать еще" />
  148. </body>
  149. </html>
» Описание: Работу такого функционала хорошо демонстрирует кнопка «Показать еще», которая без перезагрузки стран
» Время добавления: 6 Ноября 2014 в 18:48
» Посмотров: 9586
» textarea
» Рейтинг: [+0 | -0]
Комментарии [0]
PHP коды
Главная
Онлайн: 1
Реклама
Наш надёжный хостинг партнёр
Купить рекламу