Как написать скрипт 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;
    }

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

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

HTML5
1
2
3
4
5
6
7
8
9
10
        <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>
 
        <table width=690px; id="menuTable" class="imgSort" style="margin-top: 10px;"></table>       
        <div id="block"></div>

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
30
$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;

@Balanaar · 07.04.2017, 16:21

JavaScript
1
2
3
4
$('img.imgSort').click(function() {
  var id = $(this).attr('data-work_id');
  alert(id);
});

Вот такой код будет алертить id ваших изображений? Попробуйте.

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

приехали)))))

@Balanaar · 07.04.2017, 16:25

Поправил немного код. У вас у таблицы и у изображений одинаковые классы.

Добавлено через 27 секунд
Попробуйте заново с исправленным вариантом

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

ничего не происходит. ничего не выводит)

@Balanaar · 07.04.2017, 16:31

А... ну да. У вас же таблица асинхронно заполняется. Исправьте функцию Get():

JavaScript
1
2
3
4
5
6
7
8
9
10
function Get(param) {
  var id=param;
  $.post('loader.php',{id},function(data) {
    document.getElementById('menuTable').innerHTML=data;
    $('img.imgSort').click(function() {
      var id = $(this).attr('data-work_id');
      alert(id);
    });
  });
}

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

отлично) выводит индексы
что мне делать дальше?

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

@Balanaar · 07.04.2017, 16:38

Ну хорошо. Теперь мы получаем id по клику. Теперь нам надо его передать php-скрипту опять же по клику:

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
function Get(param) {
  var id=param;
  $.post('loader.php',{id},function(data) {
    document.getElementById('menuTable').innerHTML=data;
    $('img.imgSort').click(function() {
      var id = $(this).attr('data-work_id');
      $.ajax({
        method: 'POST',
        url: '/path/to/php/script.php', // Подставьте свой путь
        data: {id: id},
        success: function(response) {
          $('#block').html(response);
        }
      });
    });
  });
}

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

если мой файл пхп тот же loader.php и лежит рядом с index.php то просто так и написать 'loader.php'?

@Balanaar · 07.04.2017, 16:43

Нет. Вынесите ваш php-скрипт в отдельный файл.

Добавлено через 1 минуту
Можно конечно и не выносить, но там придётся сделать несколько манипуляций. А я уже немного устал.

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

сделано)
url: 'loaderInf.php'

@Balanaar · 07.04.2017, 16:45

Ну. Работает?

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

почти)
чо не так?

PHP
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<?php
    $host = "localhost"; //адрес сервера
    $database = "clearfolder"; //имя базы данных
    $user = "horosami"; //имя пользователя
    $passwordd = "1111"; //пароль
    $link = mysqli_connect($host, $user, $passwordd, $database) or die ("Ошибка блин" . mysqli_error($link));
    $str = '';
    $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, 16:48

Функцию Get() покажите

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

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
        function Get(param) {
          var id=param;
          $.post('loader.php',{id},function(data) {
            document.getElementById('menuTable').innerHTML=data;
            $('img.imgSort').click(function() {
              var id = $(this).attr('data-work_id');
              $.ajax({
                method: 'POST',
                url: 'loaderInf.php',
                data: {id: id},
                success: function(response) {
                  $('#block').html(response);
                }
              });
            });
          });
        }

@Balanaar · 07.04.2017, 16:52

Опять забыл, что у вас древний jQuery. Подключите хотя бы 1.9 и всё заработает. Переделывать под старый лень.

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

щас попробую!

@Balanaar · 07.04.2017, 16:53

HTML5
1
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

Строка для подключения последней версии JQ. Ничего качать не надо.
Только отключите старый. Иначе конфликты могут возникнуть.

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

внутри это строки вставлять свой код js??

@Balanaar · 07.04.2017, 16:56

Нет. Просто эту строку запихиваете в <head></head>

Новые блоги и статьи Все статьи Все блоги /
Символьное дифференцирование igorrr37 13.02.2026 / * Логарифм записывается как: (x-2)log(x^2+2) - означает логарифм (x^2+2) по основанию (x-2). Унарный минус обозначается как ! в-строка - входное арифметическое выражение в инфиксной(обычной). . .	Камера 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, то после закрытия окошка. . .

@Horosami 0 / 0 / 0 Регистрация: 20.02.2015 Сообщений: 69
	07.04.2017, 16:24 [ТС]
	приехали))))) Миниатюры 0

@Balanaar 2463 / 1769 / 625 Регистрация: 11.07.2016 Сообщений: 4,067
	07.04.2017, 16:25
	Поправил немного код. У вас у таблицы и у изображений одинаковые классы. Добавлено через 27 секунд Попробуйте заново с исправленным вариантом 0

@Horosami 0 / 0 / 0 Регистрация: 20.02.2015 Сообщений: 69
	07.04.2017, 16:28 [ТС]
	ничего не происходит. ничего не выводит) 0

@Horosami 0 / 0 / 0 Регистрация: 20.02.2015 Сообщений: 69
	07.04.2017, 16:36 [ТС]
	отлично) выводит индексы что мне делать дальше? Добавлено через 2 минуты асинхронно это ведь относится к аяксу?? 0

@Horosami 0 / 0 / 0 Регистрация: 20.02.2015 Сообщений: 69
	07.04.2017, 16:41 [ТС]
	если мой файл пхп тот же loader.php и лежит рядом с index.php то просто так и написать 'loader.php'? 0

@Balanaar 2463 / 1769 / 625 Регистрация: 11.07.2016 Сообщений: 4,067
	07.04.2017, 16:43
	Нет. Вынесите ваш php-скрипт в отдельный файл. Добавлено через 1 минуту Можно конечно и не выносить, но там придётся сделать несколько манипуляций. А я уже немного устал. 0

@Horosami 0 / 0 / 0 Регистрация: 20.02.2015 Сообщений: 69
	07.04.2017, 16:44 [ТС]
	сделано) url: 'loaderInf.php' 0

@Balanaar 2463 / 1769 / 625 Регистрация: 11.07.2016 Сообщений: 4,067
	07.04.2017, 16:45
	Ну. Работает? 0

@Balanaar 2463 / 1769 / 625 Регистрация: 11.07.2016 Сообщений: 4,067
	07.04.2017, 16:48
	Функцию Get() покажите 0

@Balanaar 2463 / 1769 / 625 Регистрация: 11.07.2016 Сообщений: 4,067
	07.04.2017, 16:52
	Опять забыл, что у вас древний jQuery. Подключите хотя бы 1.9 и всё заработает. Переделывать под старый лень. 0

@Horosami 0 / 0 / 0 Регистрация: 20.02.2015 Сообщений: 69
	07.04.2017, 16:53 [ТС]
	щас попробую! 0

@Horosami 0 / 0 / 0 Регистрация: 20.02.2015 Сообщений: 69
	07.04.2017, 16:55 [ТС]
	внутри это строки вставлять свой код js?? 0

@Balanaar 2463 / 1769 / 625 Регистрация: 11.07.2016 Сообщений: 4,067
	07.04.2017, 16:56
	Сообщение было отмечено Horosami как решение Решение Нет. Просто эту строку запихиваете в <head></head> 1

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

Решение