$('#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);
                  }
          }
    });
});

<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

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

?>