Перезагрузите DIV с новыми изображениями

Question

У меня есть база данных сотрудников, которая включает в себя изображения, а также место их работы (специальность).Я создал страницу, где я заполняю форму и загружаю изображение в каталог и путь к базе данных.Затем я загружаю главную страницу, где я извлекаю все изображения из базы данных (в DIV «photos». Все отлично работает.

Я хотел бы перезагрузить изображения в DIV на основеMySQL запрос от кнопки. Например, вместо того, чтобы показывать всех сотрудников, я хочу видеть только тех, у кого есть определенная функция работы, например, Управление. В настоящее время я выполняю это путем перенаправления на новую страницу, где я запускаю определенный запрос и чтотакже отлично работает. Однако я хотел бы узнать, как это сделать, не создавая новую страницу для каждого запроса. Я потратил много дней, просматривая учебные пособия по AJAX и PHP, которые я, как мне удалось, достиг того, что имею, но я не могу найти способ делать то, что я хочу. Это соответствующая часть моего кода:

Main.php

<div class="container-fluid">
<div class="row">
<div class ="col-lg-12"  style="width: 18%; height: 100%; border:3px solid red;">

<a href = "management.php" class="btn btn-primary">MANAGEMENT</a>
<a href = "high.php" class="btn btn-primary">HIGH</a>

</div>
<?php
 include ('db_connect.php');
 //include_once ('functions.php');

 $result = $db->query("SELECT * from monctonfir order by initials ASC");

 if($result->num_rows > 0){
    while ($row = $result->fetch_assoc()){
        $imageURL = 'image/'.$row["file"];
        $initial = $row["initials"];
        $name = $row["name"];
    ?>




    <div id="photos" class = "col-lg-1 no-gutters" style="margin-top:1rem;">
    <div class="card text-center" style="width: 5rem;">
    <a href = "#">
        <img class="img card-img-top" src = "<?php echo $imageURL ?>"> 
    </a>
    <div class = "card-body">
        <h5 class = "card-title round-button" style="text-align: center;"><?php echo $initial  ?></h5>
    </div>

    </div>
    </div>

    <?php }
 } ?>

</div>

Может кто-тоНаправьте меня в правильном направлении? Спасибо!

Answer 1

Вам не нужен jQuery для того, что вы делаете.Вы можете использовать параметры запроса / GET для создания вашего sql, чтобы вам не нужно было создавать другую страницу.Нравится:

<div class="container-fluid">
    <div class="row">
        <div class ="col-lg-12"  style="width: 18%; height: 100%; border:3px solid red;">

            <a href = "?job=management" class="btn btn-primary">MANAGEMENT</a>
            <a href = "?job=high" class="btn btn-primary">HIGH</a>
            <a href = "?" class="btn btn-primary">ALL</a>

        </div>
        <?php
        include ('db_connect.php');
        //include_once ('functions.php');

        $sql = "SELECT * from monctonfir WHERE 1 ";

        if(isset($_GET['job'])) $sql .= " AND job = '".$_GET['job']."' ";


        $sql .= " order by initials ASC";

        $result = $db->query($sql);

        if($result->num_rows > 0){
            while ($row = $result->fetch_assoc()){
                $imageURL = 'image/'.$row["file"];
                $initial = $row["initials"];
                $name = $row["name"];
                ?>




                <div id="photos" class = "col-lg-1 no-gutters" style="margin-top:1rem;">
                    <div class="card text-center" style="width: 5rem;">
                        <a href = "#">
                            <img class="img card-img-top" src = "<?php echo $imageURL ?>">
                        </a>
                        <div class = "card-body">
                            <h5 class = "card-title round-button" style="text-align: center;"><?php echo $initial  ?></h5>
                        </div>

                    </div>
                </div>

            <?php }
        } ?>

    </div>

Answer 2

Самый простой способ - использовать функцию загрузки Jquery Jquery Например:

$( "#divID" ).load( "loadEmploye.php", { parameters1: 25, parameters2:3 });