Загрузка информации php в html документ с использованием AJAX

Question

Я очень плохо знаком с использованием AJAX и испытываю проблемы с его использованием для загрузки данных из файла обработчика php в элемент html div после того, как пользователь щелкнет часть изображения SVG.

HTML-код - обновляется ajax после того, как php отправит информацию о БД

<div  class="col-md-5 col-sm-5 exercises">
<h2 style="text-align: center;">Exercises</h2>
    <div  class="exercise-list">                    
     <?php //$exercises->getExercises($result); ?>
      <div class='media'><h3 id="exercise-list">Pick a muscle</h3>
      </div>                    
    </div>
</div>

ExerciseHandler.php - возникли проблемы с выяснением того, что входит в $ _GET, или мне следует использовать другой метод?

<?php
 require_once "Exercises.class.php";
 include 'dbconnect.php';

 $connect = new mysqli($servername, $username, $password, $dbname);

 $sql = "SELECT Muscle, Exercise, ImgResource, Descrip FROM exercises";
 $result = $connect->query($sql);

 if(isset( $_GET[''] )) {
   $exercises = new Exercises();
   $exercises->getExercises($result);
}
?>

Exercise.class.php

class Exercises {
public function getExercises($result) {        
    if ($result->num_rows > 0) {
        // output data of each row
        while ($row = $result->fetch_assoc()) {                                         
            echo    "<div class='media'>";
            echo        "<div class='media-object pull-left'>";
            echo            "<a href='#'><img src='".$row["ImgResource"]."' class='img-responsive' alt='curl'></a>";
            echo        "</div>";
            echo        "<div class='media-body'>";
            echo            "<h4 class='media-heading'><a href='#'>".$row["Exercise"]."</a></h4>";
            echo        "</div>";
            echo    "</div>";
        }
    }
}
}
?>

loadExercises.js

function getExercises(clicked_muscle){
var muscle = clicked_muscle;
    alert("You selected" + muscle);

if (window.XMLHttpRequest) {
    //modern browsers
    ajaxRequest = new XMLHttpRequest();
 } else {
    // code for old IE browsers
    ajaxRequest = new ActiveXObject("Microsoft.XMLHTTP");
} 

ajaxRequest.onreadystatechange = function () {
    if (this.readyState == 4 && this.status == 200) {
        document.getElementById("exercise-list").innerHTML=this.responseText;
    };

}

ajaxRequest.open("GET", "ExerciseHandler.php", true);
ajaxRequest.send();


}

Функция Getexercises. один из фактов для мышц

 public function getExercises($result) {        
        if ($result->num_rows > 0) {
            // output data of each row
            while ($row = $result->fetch_assoc()) {                                         
                echo    "<div class='media'>";
                echo        "<div class='media-object pull-left'>";
                echo            "<a href='#'><img src='".$row["ImgResource"]."' class='img-responsive' alt='curl'></a>";
                echo        "</div>";
                echo        "<div class='media-body'>";
                echo            "<h4 class='media-heading'><a href='#'>".$row["Exercise"]."</a></h4>";
                echo        "</div>";
                echo    "</div>";
            }
        }

    }

Вот скриншот

Answer 1

Это код, который работал

 $("#Biceps").click(function(){
  $.get("ExerciseHandler.php", function(data, status){
     $("#exercise-list").html(data);
  });
}); 

Answer 2

Пожалуйста, проверьте код ниже.

HTML code Я внес некоторые изменения в этот файл для опции выбора и вызова функции jquery для вызываемого ajax.

<div  class="col-md-5 col-sm-5 exercises">
    <h2 style="text-align: center;">Exercises</h2>
    <div  class="exercise-list"> 
        <select onchange="getExercises(this)">
            <option value="1">Test</option>
            <option value="2">Test2</option>
        </select>                 
     <?php //$exercises->getExercises($result); ?>
      <div class='media'><h3 id="exercise-list">Pick a muscle</h3>
      </div>                    
    </div>
</div>

loadExercises.js У меня есть данные для передачи в методе GET.

function getExercises(clicked_muscle){
    var muscle = set.value;;
    alert("You selected" + muscle);
    if (window.XMLHttpRequest) {
        //modern browsers
        ajaxRequest = new XMLHttpRequest();
     } else {
        // code for old IE browsers
        ajaxRequest = new ActiveXObject("Microsoft.XMLHTTP");
    } 

    ajaxRequest.onreadystatechange = function () {
        if (this.readyState == 4 && this.status == 200) {
            document.getElementById("exercise-list").innerHTML=this.responseText;
        };

    }
    ajaxRequest.open("GET", "ExerciseHandler.php?value="+muscle, true);
    ajaxRequest.send();
}

ExerciseHandler.php

<?php
    require_once "Exercises.class.php";
    include 'dbconnect.php';

    $connect = new mysqli($servername, $username, $password, $dbname);

    $sql = "SELECT Muscle, Exercise, ImgResource, Descrip FROM exercises";
    $result = $connect->query($sql);

    if(isset($_GET) && !empty($_GET)) {
        $exercises = new Exercises();
        $exercises->getExercises($result);
    }
?>