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

Новые блоги и статьи Все статьи Все блоги /
Нейросеть на алгоритме "эстафета хвоста" как перспектива. Hrethgir 06.05.2026 На десерт, когда запущу сервер. Статья тут https:/ / habr. com/ ru/ articles/ 1030914/ . Автор я сам, нейросеть только помогает в вопросах которые мне не известны - не знаю людей которые знали-бы. . .	Асинхронный приём данных из COM-порта Argus19 01.05.2026 Асинхронный приём данных из COM-порта Купил на aliexpress термопринтер QR701. Он оказался странным. Поключил к Arduino Nano. Был очень удивлён. Наотрез отказывается печатать русские буквы. Чтобы. . .	попытка написать игровой сервер на C++ pyirrlicht 29.04.2026 попытка написать игровой сервер на плюсах с открытым бесконечным миром. возможно получится прикрутить интерпретатор питон для кастомизации игровой логики. что есть на текущий момент:. . .	Контроль уникальности выбранного документа-основания при изменении реквизита Maks 28.04.2026 Алгоритм из решения ниже разработан на примере нетипового документа "ЗаявкаНаРемонтСпецтехники", разработанного в КА2. Задача: уведомлять пользователя, если указанная заявка (документ-основание). . .
Благородство как наказание Maks 24.04.2026 У хорошего человека отношения с женщинами всегда складываются трудно. А я человек хороший. Заявляю без тени смущения, потому что гордиться тут нечем. От хорошего человека ждут соответствующего. . .	Валидация и контроль данных табличной части документа перед записью Maks 22.04.2026 Алгоритм из решения ниже реализован на примере нетипового документа, разработанного в КА2. Задача: контроль и валидация данных табличной части документа перед записью с учетом регламента компании. . .	Отчёт о затраченных материалах за определенный период с макетом печатной формы Maks 21.04.2026 Отчёт из решения ниже размещён в конфигурации КА2. Задача: разработка отчёта по затраченным материалам за определённый период, с возможностью вывода печатной формы отчёта с шапкой и подвалом. В. . .	Отчёт о спецтехнике находящейся в ремонте Maks 20.04.2026 Отчёт из решения ниже размещен в конфигурации КА2. Задача: отобразить спецтехнику, которая на данный момент находится в ремонте. Есть нетиповой документ "Заявка на ремонт спецтехники" который. . .

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

Решение