javascript - 使用PHP+JSON+AJAX清除以前从数据库返回的HTML数据

Question

我正在做数据库项目，我构建了数据库和UI，DB和UI之间的通信是通过PHP，JSON和AJAX进行的。在“前 3 名”选项卡中，我试图将成绩最高的前 3 名学生带来，我的计划是使用下拉选项，每次选择另一门类(class)并每次都带来前 3 名。该代码可以工作，但不是我想要的。它总是将新结果附加到最后的结果。如果我试图带另一个前 3 名的学生，它将把新结果附加到最后的结果中，而不是清除以前的数据。

我的代码是:

Javascript:

    $('#showCourse').click(function(){
        console.log("showCourse");
        var top3 = $('#top3').val();
        var top3Table = $('#top3Table');
        console.log(top3);
        $.ajax({
            type: "POST",
            dataType:"json",
            data: {"top3" : top3},
            url: "jsonTop3.php",
            cache: false,
            success: function(data){  
                console.log("success");      
                console.log(data.length);
                for (var i = 0; i < data.length; i++) {
                    var row = "<tr><td>" + data[i].student_id + "</td>" +
                                     "<td>" + data[i].grade + "</td></tr>";
                    top3Table.append(row);
                  }
          }
    });
});

HTML:

<div class="container">
       <div class="insertData" style="height:180px;">
        <h3>Pick Course name:</h3>
        <form class="form-horizontal">
            <select class="form-control" id="top3" onchange="document.getElementById('text_content').value=this.options[this.selectedIndex].text">
                <option>None</option>
                <option>Operational Systems</option>
                <option>Integrators</option>
                <option>Web Development</option>
                <option>Algebra</option>
                <option>Chimestry</option>
                <option>Biology</option>
                <option>History</option>
                <option>JAVA</option>
                <option>Intro to Math</option>
                <option>UNIX</option>
            </select>
            <input type="hidden" name="hid" id="text_content" value="">
        </form>
                <div class="rightButtons">
                <button type="add" name="type" class="btn btn-success" id="showCourse">Show</button> 
                </div>
        </div>
<div class="table">
    <h2>Top 3 Table</h2>
        <table class="table table-striped">
            <thead>
            </thead>
            <tbody id = "top3Table">
            </tbody>
        </table>
    </div>
    </div>
    <script src="script.js"></script>
    </body>
</html>

PHP:

<?php

    function printStudents() {
      $host="127.0.0.1";
      $port=3306;
      $user="root";
      $password="root";
      $dbname="courcessystem";

     $con = new mysqli($host, $user, $password, $dbname, $port)
        or die ('Could not connect to the database server' . mysqli_connect_error());


        $sql = "SELECT * FROM reg_courses
        ORDER BY course_id ASC";
        $result = mysqli_query($con, $sql) or die("Error in Selecting " . mysqli_error($con));

        $emparray = array();
        while($row =mysqli_fetch_assoc($result)) {
            $emparray[] = $row;
        }

        echo json_encode($emparray);
        $con->close();   
    }   

    printStudents();

?>

Answer 1

使用

success: function(data){  
      var row = '';
      for (var i = 0; i < data.length; i++) {
         row += "<tr><td>" + data[i].student_id + "</td>" +
                     "<td>" + data[i].grade + "</td></tr>";
      }
      top3Table.html(row);
   }

而不是你的成功函数