Как сделать динамический запрос через Ajax передав данные кликнув на 1 блок и получить их из базы данных в другом блоке?

Question

[Gelvers]

Как сделать так что при клике на определённый div у него взяло id и передало их в php файл где зачитались данные из базы данных по заданному ранее id и после чего вывелись на другой див ?

Comments

[Александр Нестеров]

Что именно у вас не получается?

[zkrvndm]

Покажите непонятные моменты, я помогу.

[Gelvers]

Существует 8 параметров в БД
id , name , price , amount , img ,mass , shield , descriprion .
4 из них name(имя) , price(цена) , amount(колличество) img(картинка) уже отобразились в блоках по данному коду

<?php
            
          
            $query = "set names utf8";
            $connect->query($query);
            $query ="select * from `armour`";
            $results = $connect ->query($query);
            while($row = $results->fetch_assoc()){

                echo '  <div class="block" id=" '.$row['id'].'">
                <div class="w_img">
                    <img class="product" src="'.$row['img'].'" width="350px" height="150"  >
                </div>
                <div class="w_info">
                    <div class="container4">
                        <div class="name">
                        '.$row['name'].' 
                           </div>
                    </div>
                    <div class="container5">
                        <div class="price"> <p>$</p>  '.$row['price'].'  $</div>
                        <div class="kolvo"><p>X</p>   '.$row['amount'].' шт.</div>
                    </div>
                </div>
            </div> ';

            }
           ?>

Целью является сделать так что при нажатии на определённый блок вниз передались ещё параметры из БД нужного блока , а именно : name(имя) , price(цена) , amount(колличество) , img(картинка) ,mass(масса) , shield(защита) , descriprion(описание) .

1 вариант .
При нажатии на какой то из двух блоков , через ajax отправляеться запрос в БД по ключу id одного из блоков , после чего брал данные из БД и передавал их в нижний блок без перезагрузки страницы , тоесть имя цену описание картинку и т д.

2 вариант.
При нажатии на какой то из двух блоков , скрытые ранее полученные данные из БД mass(масса) , shield(защита) , descriprion(описание) показывались в нижнем блоке .

Код нижнего блока

<div class="infobox_shop">
        <div class="infobox_shop_container_1">
            <div class="infobox_shop_img">"><img class="logogun" src="img/icon_armour.png" > </div>
            <div class="infobox_shop_item">
                <div class="infobox_shop_name" >
                    <div class="namegun_shop">Название комплекта</div>
                    <div class="shop_price">$(Цена)</div>
                    <div class="page_cont">
                        <div title="Меньше" class="mins">-</div>
                        <div class="array_gun">0</div>
                        <div title="Больше" class="plus">+</div>
                        
                    </div>
                </div>
                <div class="infobox_shop_description" > </div>
            </div>
        </div>
        <div class="infobox_shop_container_2">
            <div class="infoblock_shop">Масса<p></p></div>
            <div class="infoblock_shop">Класс защиты<p></p></div>
           
        
        </div>
    </div>

Answer 1

[Nik Faraday]

$.ajax({
   url: 'YourUrl',
   method: 'post',
   data: JSON.stringify(' Вытянуть id (ССылку кинул ниже)'),
   dataType: 'json',
   success: (response) => {
      *Тут обращаемся к нужному элементы и вытягиваем из response данные в виде Json*
   }
});

Как вытянуть id элемента