使用AJAX将php信息加载到html doc中

Posted 2021-03-26

我非常擅长使用AJAX，并且在用户单击svg图像的一部分后，使用它将数据从php处理程序文件加载到html div元素时遇到了问题。

HTML代码 - 一旦php发送db信息，将由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);
}
?>

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>";
            }
        }

    }

这是一张截图

答案

请检查以下代码。

HTML代码我在这个文件中对select选项进行了一些更改，并为调用的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);
    }
?>

另一答案

这是有效的代码

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