Реализация кнопки "Показать еще"

@galaid · Регистрация: 20.09.2011

Студворк — интернет-сервис помощи студентам

Добрый день.

Работаю с PHP. Имеется массив, содержащий некоторое количество элементов (каждый элемент представляет собой адрес некоего изображения). Обычно массив содержит более 100 элементов, и выводить их все одновременно довольно затратно и некрасиво.

PHP
1
2
3
<? for($i=0;$i<count($photo);$i++) { ?>
<img src="<? echo $photo[$i]['photo']; ?>">
<? } ?>

Поэтому я решил сразу выводить некоторое конкретное число изображений, а остальные выводить после нажатия кнопки "Показать еще".

PHP
1
2
3
<? for($i=0;$i<20;$i++) { ?>
<img src="<? echo $photo[$i]['photo']; ?>">
<? } ?>

В данном случае у меня выведется 20 изображений. Подскажите, как реализовать кнопку "Показать еще" в моем случае, чтобы остальные картинки подгружались только после нажатия кнопки.

P.S. Гуглил. Нашел несколько скриптов на ajax, но поскольку к коду не было никаких комментариев, то принцип их работы остался мне не понятен (с ajax не знаком). Но на сколько я понял, там подгружается отдельная php-страница, а у меня немного другой случай.

z-z · 30.06.2013, 12:30

@galaid, наверно как то так

JavaScript
1
2
3
4
5
6
7
8
$.ajax({ //запрос запускается при нажатии кнопки
  type: 'POST',
  url: img.php,
  data: 'start=10&end=20',
  success: function(data){
    $('.results').html(data);
  }
});

файл, к которому отправляется запрос - img.php

PHP
1
2
3
4
5
$s = "";
for($i=$_POST['start'];$i<$_POST['end'];$i++) {
    $s .= "<img src = '".$photo[$i]['photo']."' /> "
}
echo $s;

start, end - с какой картинки по какую выводить...))

@galaid · 30.06.2013, 14:35 **[ТС]**

@z-z, попробывал. Что-то ничего не выводится.

Вот кнопка:

HTML5
1
<input type="button" value="Показать" onclick="show_photos(<? echo $_GET['id']; ?>);">

Вот функция, которую я закинул в head:

HTML5
1
2
3
4
5
6
7
8
9
10
11
<script type="text/javascript">
function show_photos(id) {
    $.ajax({
        type: 'POST',
        url: photos.php,
        data: 'id='.id;
        success: function(data) {
            $('.results').html(data);
            }
    }
</script>

photos.php

PHP
1
2
3
4
5
6
7
8
<?
include('func.php');
$photos=getphotos($_GET['id']);
for($i=20;$i<count($photos);$i++) {
$data.="<img src=\"$photos[$i]['photo']\">";
}
echo $data;
?>

Делал все по примеру выше. Не выводится ничего.

z-z · 30.06.2013, 15:47

galaid, во первых в javascript сложение строк производится с помощью +

JavaScript
1
data: 'id=' + id;

во вторых вы передаете данные с помощью POST-запроса, а поймать данные в файле photos.php пытаетесь методом GET

PHP
1
$photos=getphotos($_POST['id']);

потом переменная $data у вас ранее не объявняется, в нее сразу начинают записыватся данные, не знаю, допустимо это или нет в php, но я бы заранее объявил переменную

PHP
1
2
3
4
include('func.php');
$photos=getphotos($_GET['id']);
$data = "";
//...

потом хотелось бы знать, какого вида данные у вас хранятся в переменной $photos
ну и $('.results').html(data); этот код вставляет кучу картинок в блок с классом results... у вас на странице есть такой блок? или вы это тоже просто скопировали?)

@galaid · 30.06.2013, 16:08 **[ТС]**

Немного поправил свой код, но проблема осталась:

Кликните здесь для просмотра всего текста

HTML5
1
2
<input type="button" value="Показать" onclick="show_photos(<?php echo $_GET['id']; ?>);">
<div class="results"></div>

HTML5
1
2
3
4
5
6
7
8
9
10
11
<script type="text/javascript">
function show_photos(id) {
    $.ajax({
        type: 'POST',
        url: photos.php,
        data: 'id='+id;
        success: function(data) {
            $('.results').html(data);
            }
    }
</script>

PHP
1
2
3
4
5
6
7
8
9
<?
$data='';
include('func.php');
$photos=getphotos($_POST['id']);
for($i=20;$i<count($photos);$i++) {
$data.="<img src=\"$photos[$i]['photo']\">";
}
echo $data;
?>

В переменная $photos имеет примерно такую структуру: ('0'=>('photo'=>адрес картинки, ...), ..., '42'=>('photo'=>адрес картинки, ...)).

Думаю, что поиск ошибки в моем коде не даст никакого результата. Суть мне понятна. Попробую разобраться дальше.

z-z · 30.06.2013, 16:13

Сообщение от galaid

data: 'id='+id;

точка с запятой... параметры через запятую перечисляются

посмотрите, может еще какие мелкие косяки есть...
а вообще загляните в консоль ошибок... если ошибка в javascript, то ее можно будет в консоли найти

@galaid · 30.06.2013, 19:04 **[ТС]**

Вобщем-то я разобрался. И все работает как и должно работать. Скажите, зачем в голову нужно добавлять что-то типо этого:

HTML5
1
<script src="jquery.min.js" type="text/javascript"></script>

Без подключения этого скрипта не работает.

@kalabuni · 30.06.2013, 19:43

Не по теме:

Сообщение от galaid

Вобщем-то я разобрался. И все работает как и должно работать. Скажите, зачем в голову нужно добавлять что-то типо этого:

вы отлично разобрались :)

прям как в анекдоте:
-- Василий Иванович, белые прорвались!
-- Возьми, Петька, гранату и уничтожь белых.
Через полчаса Петька вваливается весь израненный: "Уф, еле отбились!"
-- Молодец, Петька! Положи гранату на место

@galaid · 30.06.2013, 19:49 **[ТС]**

kalabuni, понимаю, что смешно.В самом начале написал

Сообщение от galaid

с ajax не знаком

Поэтому лучше что по делу напишите)

@kalabuni · 30.06.2013, 20:03

а причём тут ajax?

существует скриптовой язык Javascript
с помощью которого можно "оживить" статические страницы, написанные на HTML
код на этом языке прописывается в блоке <script>код на Javascript'e</script>
или подключается в виде файла <script src="путь к Javascript-файлу"></script>

для тех, кто не хочет (или не может, или не способен, ибо туп) разобраться с языком Javascript
написаны javascript-библиотеки в виде кода нескольких сотен функций на javascript'e
таких библиотек много - JQuery, ExtJS, Dojo toolkit, Prototype и т.д.
все эти библиотеки оформлены в виде javascript-файлов, один из которых следует подключить к странице
а потом еще в скриптовом блоке задать параметры кода для вызываемых функций подключённой библиотеки

вы в вашем коде используете javascript-библиотеку JQuery
разумеется, эту библиотеку надо к странице подключить

и снова спрашиваю - причём тут ajax, с которым вы незнакомы?

z-z · 30.06.2013, 20:33

Не по теме:

мой косяк)) не сказал, чтто надо jquery подключить))
просто для мемня ajax без помощи jquery - ужас... я его боюсь)) поэтому автоматом через библиотеку делаю))

Новые блоги и статьи Все статьи Все блоги /
Советы по крайней бережливости. Внимание, это ОЧЕНЬ длинный пост. Programma_Boinc 28.12.2025 Советы по крайней бережливости. Внимание, это ОЧЕНЬ длинный пост. Налог на собак: https:/ / ********/ gallery/ V06K53e Финансовый отчет в Excel: https:/ / ********/ gallery/ bKBkQFf Пост отсюда. . .	Кто-нибудь знает, где можно бесплатно получить настольный компьютер или ноутбук? США. Programma_Boinc 26.12.2025 Нашел на реддите интересную статью под названием Anyone know where to get a free Desktop or Laptop? Ниже её машинный перевод. После долгих разбирательств я наконец-то вернула себе. . .	Thinkpad X220 Tablet — это лучший бюджетный ноутбук для учёбы, точка. Programma_Boinc 23.12.2025 Рецензия / Мнение/ Перевод Нашел на реддите интересную статью под названием The Thinkpad X220 Tablet is the best budget school laptop period . Ниже её машинный перевод. Thinkpad X220 Tablet —. . .	PhpStorm 2025.3: WSL Terminal всегда стартует в ~ and_y87 14.12.2025 PhpStorm 2025. 3: WSL Terminal всегда стартует в ~ (home), игнорируя директорию проекта Симптом: После обновления до PhpStorm 2025. 3 встроенный терминал WSL открывается в домашней директории. . .	Как объединить две одинаковые БД Access с разными данными VikBal 11.12.2025 Помогите пожалуйста !! Как объединить 2 одинаковые БД Access с разными данными.
Новый ноутбук volvo 07.12.2025 Всем привет. По скидке в "черную пятницу" взял себе новый ноутбук Lenovo ThinkBook 16 G7 на Амазоне: Ryzen 5 7533HS 64 Gb DDR5 1Tb NVMe 16" Full HD Display Win11 Pro	Музыка, написанная Искусственным Интеллектом volvo 04.12.2025 Всем привет. Некоторое время назад меня заинтересовало, что уже умеет ИИ в плане написания музыки для песен, и, собственно, исполнения этих самых песен. Стихов у нас много, уже вышли 4 книги, еще 3. . .	От async/await к виртуальным потокам в Python IndentationError 23.11.2025 Армин Ронахер поставил под сомнение async/ await. Создатель Flask заявляет: цветные функции - провал, виртуальные потоки - решение. Не threading-динозавры, а новое поколение лёгких потоков. Откат?. . .	Поиск "дружественных имён" СОМ портов Argus19 22.11.2025 Поиск "дружественных имён" СОМ портов На странице: https:/ / norseev. ru/ 2018/ 01/ 04/ comportlist_windows/ нашёл схожую тему. Там приведён код на С++, который показывает только имена СОМ портов, типа,. . .	Сколько Государство потратило денег на меня, обеспечивая инсулином. Programma_Boinc 20.11.2025 Сколько Государство потратило денег на меня, обеспечивая инсулином. Вот решила сделать интересный приблизительный подсчет, сколько государство потратило на меня денег на покупку инсулинов. . . .

@kalabuni супермизантроп 3941 / 2979 / 692 Регистрация: 18.04.2012 Сообщений: 8,629
	30.06.2013, 20:03
	а причём тут ajax? существует скриптовой язык Javascript с помощью которого можно "оживить" статические страницы, написанные на HTML код на этом языке прописывается в блоке <script>код на Javascript'e</script> или подключается в виде файла <script src="путь к Javascript-файлу"></script> для тех, кто не хочет (или не может, или не способен, ибо туп) разобраться с языком Javascript написаны javascript-библиотеки в виде кода нескольких сотен функций на javascript'e таких библиотек много - JQuery, ExtJS, Dojo toolkit, Prototype и т.д. все эти библиотеки оформлены в виде javascript-файлов, один из которых следует подключить к странице а потом еще в скриптовом блоке задать параметры кода для вызываемых функций подключённой библиотеки вы в вашем коде используете javascript-библиотеку JQuery разумеется, эту библиотеку надо к странице подключить и снова спрашиваю - причём тут ajax, с которым вы незнакомы? 0

z-z
	30.06.2013, 20:33
	Не по теме: мой косяк)) не сказал, чтто надо jquery подключить)) просто для мемня ajax без помощи jquery - ужас... я его боюсь)) поэтому автоматом через библиотеку делаю)) 0