Как написать скрипт ajax вывода инфы из бд php?

@Horosami · Регистрация: 20.02.2015

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

В базе данных хранятся картинки. У картинок есть ид - work_id и куча другой инфы (pic, topic, direction, about, category).
Картинки выводятся в таблицу в зависимости от категории (category).

JavaScript
1
2
3
4
5
6
            function Get(param) {
                var id=param;
                $.post('loader.php',{id},function(data) {
                    document.getElementById('menuTable').innerHTML=data;
                });
            }

и сам запрос который выводит картинки в ячейки таблицы:

PHP
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
$string = '';
    if ($_POST['id']==0) {
        $result=mysqli_query($link,"SELECT `work_id`,`pic` FROM `works`");
    }
    else {
        $result=mysqli_query($link,"SELECT `work_id`,`pic` FROM `works` where `category`='$_POST[id]'");
    }
 
    $j=0;
    while ($row = mysqli_fetch_assoc($result)) {
        if ($j == 0)
        {
            $p = "<tr><td><img class='imgSort' src='".$row['pic']."' data-work_id='".$row['work_id']."'></td>";
            $j++;
        }
        else if ($j==2)
        {
            $p = "<td><img class='imgSort' src='".$row['pic']."' data-work_id='".$row['work_id']."'></td></tr>";
            $j = 0;
        }       
        else 
        {
            $p = "<td><img class='imgSort' src='".$row['pic']."' data-work_id='".$row['work_id']."'></td>";
            $j++;
        }
 
        $string.=$p;
    }
    echo $string;

Мне надо по нажатию на картинку из этой таблицы - вывести ее инфу в блок:

HTML5
1
<div id="block"></div>

Как написать аякс скрипт чтоб он реагировал на щелчок по картинке в таблице. брал ее ид (я прописала атрибут когда выводится картинка в таблицу) и выводил инфу.
это просто запрос пхп, что исправить?

PHP
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
    $str = '';
 
    if ($_POST['id']>=1) {
        $res=mysqli_query($link,"SELECT `work_id`,`topic`,`direction`,`about` FROM `works` WHERE `work_id`=".$_POST['id']);
        while ($row = mysqli_fetch_assoc($res)) {
            $workid = $row['work_id'];
            $topic = $row['topic'];
            $direction = $row['direction'];
            $about = $row['about'];
            $pp="<p>$workid</p><p>$topic</p><p>$direction</p><p>$about</p>";
            $str.=$pp;
        }
 
        echo $str;
    }

@Balanaar · 07.04.2017, 14:46

В каждую строчку не вчитывался, но похоже на правду. Вам нужно знать как запустить последний скрипт по клику на картинку?

@Horosami · 07.04.2017, 14:48 **[ТС]**

дада. мне надо чтоб инфа картинки выводилась именно когда кликаем на картинку саму. картинке я задала атрибут когда она в таблицу выводится.
вывести инфу в див #block.
об аяксе ничего не знаю) прошу помочь

@Balanaar · 07.04.2017, 14:51

Так у вас в функции Get(param) выполняется этот самый ajax-запрос

Делайте по аналогии.

@Horosami · 07.04.2017, 15:06 **[ТС]**

если бы у меня получалось я бы сюда не писала)
там у меня берется в зависимости от категории.
а тут надо передать атрибут. я хз как

HTML5
1
2
3
4
5
6
7
        <div id="theme1" onclick="Get(0);">Show All</div>
        <div id="theme2" onclick="Get(2);">Architecture</div>
        <div id="theme3" onclick="Get(3);">Brands</div>
        <div id="theme4" onclick="Get(4);">Web-design</div>
        <div id="theme5" onclick="Get(5);">Illuastration</div>
        <div id="theme6" onclick="Get(6);">Fashion</div>
        <div id="theme7" onclick="Get(7);">Photo</div>

@Balanaar · 07.04.2017, 15:27

В общем случае, ajax-функция на jQuery выглядит так:

JavaScript
1
2
3
4
5
6
7
8
9
10
11
$.ajax({
  method: 'POST', // Метод запроса. Обычно GET или POST
  url: '/path/to/php/script.php', // URL запроса. Обычно путь до php-скрипта, который нужно запустить
  data: {  // Параметры запроса. При использовании метода POST переданные параметры будут доступны в php-скрипте в переменной $_POST
    parameter1: 'value1', // $_POST['parameter1'] === 'value1'
    parameter2: 'value2' // $_POST['parameter2'] === 'value2'
  },
  success: function(response) { // Функция, которая будет запущена после получения ответа от сервера. В переменной response будет содержаться ответ от сервера.
    // ...
  }
});

@Horosami · 07.04.2017, 15:31 **[ТС]**

спасибо) я еще попробую

Добавлено через 1 минуту
так а как сделать чтоб при клике это выполнялось

@Balanaar · 07.04.2017, 15:37

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

так а как сделать чтоб при клике это выполнялось

В общем случае, на jQuery это выглядит так:

JavaScript
1
2
3
$(SELECTOR).on('click', function(){
  // ...
});

, где SELECTOR - селектор элементов, к которым нужно добавить обработчик события. Обработчик события будет срабатывать для каждого элемента выборки. Чтобы получить конкретно тот элемент, по которому нажали, вызовите $(this) внутри функции-обработчика. Пример:

JavaScript
1
2
3
$('img').on('click', function(){
  alert($(this).attr('src'));
});

При клике на любое изображение на странице будет выводиться адрес этого изображения.

@Horosami · 07.04.2017, 15:42 **[ТС]**

выглядит волшебно, но у меня нет никакого алерта) ничего не выводит адрес нигде.

@Balanaar · 07.04.2017, 15:44

Так это JS-код

Зачем вы его в PHP-файл запихнули?
Оберните код в теги <script></script>.
И убедитесь, что jQuery подключён.

@Horosami · 07.04.2017, 15:46 **[ТС]**

я знаю) он у меня в тегах. все ок
у меня же там прописана моя фунция которая достает изображения в зависимости от категории.))
в чем прикол?

@Balanaar · 07.04.2017, 15:48

А что у вас там консоль подчёркивает? Какая ошибка?

Добавлено через 1 минуту
Есть вероятность, что у вас слишком старая версия jQuery. Метод $.on() был добавлен в версии 1.7. Если ваша версия ниже, используйте следующую функцию:

JavaScript
1
2
3
$('img').click(function(){
  alert($(this).attr('src'));
});

@Horosami · 07.04.2017, 15:49 **[ТС]**

пишет в консоле Uncaught TypeError: $(...).on is not a function
очень странно.
у меня просто есть index.php
в нем инклудами прописаны части сайти.
одна из частей это та, куда я вывожу это все.
чтобы не путаться я временно пропсиала js внутри этой части.
вывод картинок работает. а это чо-то нет)

@Balanaar · 07.04.2017, 15:50

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

пишет в консоле Uncaught TypeError: $(...).on is not a function

Да. У вас старая версия jQuery.

@Horosami · 07.04.2017, 15:52 **[ТС]**

ошибки теперь не выводит, но и не показывает путь

@Balanaar · 07.04.2017, 16:08

http://codepen.io/anon/pen/BWgKaW
У вас есть хоть элементы <img> на странице?

@Horosami · 07.04.2017, 16:13 **[ТС]**

нет конечно. в том то и дело.
у меня база данных.
в базе данных есть таблица works. в ней хранятся картинки.
у каждой картинки есть work_id и куча всего еще.
для начала мне надо вывести изображения в таблицу в зависимости от категории. я это сделала. код работает.
а теперь надо когда мы кликаем на изображение (а они все в таблице находятся), то надо достать ид картинки и выполнить запрос. по которому выведет кучу инфы(topic, direction, about) в конкретный блок #block, который находится после таблицы.
у меня есть такой запрос:

PHP
1
2
3
4
5
6
7
8
9
10
11
$res=mysqli_query($link,"SELECT `work_id`,`topic`,`direction`,`about` FROM `works` WHERE `work_id`=".$_POST['id']);
        while ($row = mysqli_fetch_assoc($res)) {
            $workid = $row['work_id'];
            $topic = $row['topic'];
            $direction = $row['direction'];
            $about = $row['about'];
            $pp="<p>$workid</p><p>$topic</p><p>$direction</p><p>$about</p>";
            $str.=$pp;
        }
 
        echo $str;

он мне выводит чо-то. но не так как мне надо.
надо написать как-то js скрипт. При клике на картинку - взять ид картинки (а я прописывала атрибут work_id) и выести инфу ее в блок.

@Balanaar · 07.04.2017, 16:16

Я понимаю вас. Мой код был просто примером, а не решением вашей задачи.

@Horosami · 07.04.2017, 16:18 **[ТС]**

пару дней решаю проблему эту, до сих пор не решила. кошмар

@Balanaar · 07.04.2017, 16:19

Кстати судя по php-коду, у вас всё-таки есть элементы <img>

Добавлено через 25 секунд
Вы можете выложить сюда вёрстку вашей таблицы, которая получается на выходе?

Новые блоги и статьи Все статьи Все блоги /
Символьное дифференцирование igorrr37 13.02.2026 / * Логарифм записывается как: (x-2)log(x^2+2) - означает логарифм (x^2+2) по основанию (x-2). Унарный минус обозначается как ! */ #include <iostream> #include <stack> #include <cctype>. . .	Камера Toupcam IUA500KMA Eddy_Em 12.02.2026 Т. к. у всяких "хикроботов" слишком уж мелкий пиксель, для подсмотра в ESPriF они вообще плохо годятся: уже 14 величину можно рассмотреть еле-еле лишь на экспозициях под 3 секунды (а то и больше),. . .	И ясному Солнцу zbw 12.02.2026 И ясному Солнцу, и светлой Луне. В мире покоя нет и люди не могут жить в тишине. А жить им немного лет.	«Знание-Сила» zbw 12.02.2026 «Знание-Сила» «Время-Деньги» «Деньги -Пуля»
SDL3 для Web (WebAssembly): Подключение Box2D v3, физика и отрисовка коллайдеров 8Observer8 12.02.2026 Содержание блога Box2D - это библиотека для 2D физики для анимаций и игр. С её помощью можно определять были ли коллизии между конкретными объектами и вызывать обработчики событий столкновения. . . .	SDL3 для Web (WebAssembly): Загрузка PNG с прозрачным фоном с помощью SDL_LoadPNG (без SDL3_image) 8Observer8 11.02.2026 Содержание блога Библиотека SDL3 содержит встроенные инструменты для базовой работы с изображениями - без использования библиотеки SDL3_image. Пошагово создадим проект для загрузки изображения. . .	SDL3 для Web (WebAssembly): Загрузка PNG с прозрачным фоном с помощью SDL3_image 8Observer8 10.02.2026 Содержание блога Библиотека SDL3_image содержит инструменты для расширенной работы с изображениями. Пошагово создадим проект для загрузки изображения формата PNG с альфа-каналом (с прозрачным. . .	Установка Qt-версии Lazarus IDE в Debian Trixie Xfce volvo 10.02.2026 В общем, достали меня глюки IDE Лазаруса, собранной с использованием набора виджетов Gtk2 (конкретно: если набирать текст в редакторе и вызвать подсказку через Ctrl+Space, то после закрытия окошка. . .

@Balanaar 2463 / 1769 / 625 Регистрация: 11.07.2016 Сообщений: 4,067
	07.04.2017, 14:46
	В каждую строчку не вчитывался, но похоже на правду. Вам нужно знать как запустить последний скрипт по клику на картинку? 0

@Horosami 0 / 0 / 0 Регистрация: 20.02.2015 Сообщений: 69
	07.04.2017, 14:48 [ТС]
	дада. мне надо чтоб инфа картинки выводилась именно когда кликаем на картинку саму. картинке я задала атрибут когда она в таблицу выводится. вывести инфу в див #block. об аяксе ничего не знаю) прошу помочь 0

@Balanaar 2463 / 1769 / 625 Регистрация: 11.07.2016 Сообщений: 4,067
	07.04.2017, 14:51
	Так у вас в функции Get(param) выполняется этот самый ajax-запрос Делайте по аналогии. 0

@Horosami 0 / 0 / 0 Регистрация: 20.02.2015 Сообщений: 69
	07.04.2017, 15:31 [ТС]
	спасибо) я еще попробую Добавлено через 1 минуту так а как сделать чтоб при клике это выполнялось 0

@Horosami 0 / 0 / 0 Регистрация: 20.02.2015 Сообщений: 69
	07.04.2017, 15:42 [ТС]
	выглядит волшебно, но у меня нет никакого алерта) ничего не выводит адрес нигде. Миниатюры 0

@Balanaar 2463 / 1769 / 625 Регистрация: 11.07.2016 Сообщений: 4,067
	07.04.2017, 15:44
	Так это JS-код Зачем вы его в PHP-файл запихнули? Оберните код в теги <script></script>. И убедитесь, что jQuery подключён. 0

@Horosami 0 / 0 / 0 Регистрация: 20.02.2015 Сообщений: 69
	07.04.2017, 15:46 [ТС]
	я знаю) он у меня в тегах. все ок у меня же там прописана моя фунция которая достает изображения в зависимости от категории.)) в чем прикол? 0

@Horosami 0 / 0 / 0 Регистрация: 20.02.2015 Сообщений: 69
	07.04.2017, 15:49 [ТС]
	пишет в консоле Uncaught TypeError: $(...).on is not a function очень странно. у меня просто есть index.php в нем инклудами прописаны части сайти. одна из частей это та, куда я вывожу это все. чтобы не путаться я временно пропсиала js внутри этой части. вывод картинок работает. а это чо-то нет) 0

@Horosami 0 / 0 / 0 Регистрация: 20.02.2015 Сообщений: 69
	07.04.2017, 15:52 [ТС]
	ошибки теперь не выводит, но и не показывает путь 0

@Balanaar 2463 / 1769 / 625 Регистрация: 11.07.2016 Сообщений: 4,067
	07.04.2017, 16:08
	http://codepen.io/anon/pen/BWgKaW У вас есть хоть элементы <img> на странице? 0

@Balanaar 2463 / 1769 / 625 Регистрация: 11.07.2016 Сообщений: 4,067
	07.04.2017, 16:16
	Я понимаю вас. Мой код был просто примером, а не решением вашей задачи. 0

@Horosami 0 / 0 / 0 Регистрация: 20.02.2015 Сообщений: 69
	07.04.2017, 16:18 [ТС]
	пару дней решаю проблему эту, до сих пор не решила. кошмар 0

@Balanaar 2463 / 1769 / 625 Регистрация: 11.07.2016 Сообщений: 4,067
	07.04.2017, 16:19
	Кстати судя по php-коду, у вас всё-таки есть элементы <img> Добавлено через 25 секунд Вы можете выложить сюда вёрстку вашей таблицы, которая получается на выходе? 0