php - 使用 AJAX 将 php 信息加载到 html 文档中

Question

我对使用 AJAX 很陌生，在用户单击 svg 图像的一部分后，使用它从 php 处理程序文件将数据加载到 html div 元素时遇到问题。

HTML 代码——在 php 发送数据库信息后由 ajax 更新

<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);
}
?>

练习.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();


}

获取练习函数。肌肉的事实之一

 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

请检查下面的代码。

HTML 代码 我在这个文件中对选择选项做了一些更改，并为调用的 ajax 调用了 jquery 函数。

<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);
    }
?>