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

Новые блоги и статьи Все статьи Все блоги /
ИИ не может найти нужный язык в списке Supersumestria 05.10.2026 Я ему даю вот такое изображение и прошу найти и подчеркнуть немецкий язык. Возвращает он вот это: https:/ / i. **********/ vqBWLe2. png Нужную строчку в 3й колонке просто выдумал. . Это. . .	Новая последняя моя музыка в SUNO zorxor 05.10.2026 Здравствуйте, дорогие мои друзья! С большой радостью я хотел бы представить вам свою новую последнею музыку, которую сгенерировала мне по моей просьбе нейросеть SUNO. С уважением, zorxor. Это. . .	Nekobox - outbounds[0].transport: unknown transport type: raw damix 01.10.2026 Фикс ошибки Правым кликом по серверу -> отладочная информация -> edit Заменить "net": "raw", на "net": "tcp", Нажать кнопку reload.	Программный домашний кинотеатр russiannick 27.09.2026 Сподобился на программный домашний кинотеатр. В качестве ЯВУ по традиции выбрал js. В помощники взял Яндекс-Алису. Было создано три зала на разные интересы. исторические и ретро сериал Хичкок. . .
Беседа с ИИ о программистах, недопускающих к созданию и правке кода генеративные ИИ и причины этого zorxor 21.09.2026 Раньше я радовался или получал некоторые эмоции, пусть небольшие, но всё же, от самого процесса написания кода, рекомпиляции и запуска, видя постепенное развитие программы и прочее. А теперь лень. . .	Мобильное приложение ColorStep pavlinmavlin 17.09.2026 Реализовал приложение Красный, Зеленый, Синий в Unity3d + c#. Название изменил на ColorStep. Приложение прошло модерацию и теперь доступно для скачивания. Делал его сам, шаг за шагом — и вот,. . .	Запрет дублирования строк в табличной части Maks 13.09.2026 Реализация из решения ниже выполнена на нетиповом справочнике "Нормы ТО" с табличной часть "Виды ТО", разработанного в КА2, со следующими реквизитами: - ВидТО (СправочникСсылка. ВидыТО); - ВидГСМ. . .	Скрипты Tampermonkey для CyberForum, ChatGPT, Claude и пр. Jin X 06.09.2026 Скрипты Tampermonkey для CyberForum, ChatGPT, Claude и пр. Работая с форумом и нейросетями в браузере часто хочется что-то подкорректировать или добавить какого-то функционала. Ниже прикреплён. . .

@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?

Решение