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

我正在做数据库项目，并构建了数据库和UI，DB和UI之间的通信是通过PHP，JSON和AJAX进行的。
在“前三名”选项卡中，我尝试将成绩最高的前三名学生带入，我的计划是使用下拉选项，每次选择另一门课程，然后每次均获得前三名。该代码正在工作，但不是我想要的。
它总是将新结果附加到最后结果。如果我要招收另一名前三名的学生，那就是将新结果附加到最后的结果上，而不是清除以前的数据。

我的代码是：

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();

?>

最佳答案

采用

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

而不是你的成功功能

关于javascript - 使用PHP + JSON + AJAX从HTML中的数据库中清除以前的返回数据，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/34814690/