Fetch data from database in php through AJAX

The index.php

I created a connection with the database, Then I designed the table through <td> and <tr>. After that, I created a variable $action to get data through AJAX. I then used mysqli_fetch_array to fetch data from the database.

<?php
//including the database connection file
include_once("config.php");

//fetching data in descending order (lastest entry first)
//$result = mysql_query("SELECT * FROM users ORDER BY id DESC"); // mysql_query is deprecated

// using mysqli_query instead
?>

<html>
<head>  
    <title>Homepage</title>
    <link rel="stylesheet" href="DataTables/datatables.css" type="text/css">
    <link rel="stylesheet" href="DataTables/DataTables/css/dataTables.bootstrap.css" type="text/css">
    <link rel="stylesheet" href="DataTables/DataTables/css/jquery.dataTables.css" type="text/css">
    <script src="DataTables/datatables.js"></script>

    <script src="style/jquery-3.2.1.js"></script>

    <script src="style/datatable.js"></script>

    <script src="DataTables/DataTables/js/dataTables.bootstrap.js"></script>
    <script src="DataTables/DataTables/js/jquery.dataTables.js"></script>   
</head>

<body>
<a href="add.html">Add New Data</a><br/><br/>
<table id="datatable" class="display" width='100%' border=0>
    <thead>
        <tr bgcolor='#CCCCCC'>
            <td>Name</td>
            <td>Age</td>
            <td>Email</td>
            <td>Update</td>
        </tr>
    </thead>
    <?php 
    //while($res = mysql_fetch_array($result)) { // mysql_fetch_array is deprecated, we need to use mysqli_fetch_array 

    //$action=$_POST["action"];
    //if($action=='showroom')   
    {
    $result = mysqli_query($mysqli, "SELECT * FROM users ORDER BY id DESC");
    while($res = mysqli_fetch_array($result)) {         
        echo "<tr>";
        echo "<td>".$res['name']."</td>";
        echo "<td>".$res['age']."</td>";
        echo "<td>".$res['email']."</td>";  
        echo "<td><a href=\"edit.php?id=$res[id]\">Edit</a> | <a href=\"delete.php?id=$res[id]\" onClick=\"return confirm('Are you sure you want to delete?')\">Delete</a></td>";       
    }
    }
    ?>
    </table>
</body>
</html>

Add.html

<html>
<head>
    <title>Add Data</title>
    <script src="style/jquery-3.2.1.js"></script>
    <script src="style/insert.js"></script>
    <script src="style/view.js"></script>
</head>
<body>
    <a href="index.php">Home</a>
    <br/><br/>  
    <table bgcolor="orange" align="center" width="25%" border="0">
        <tr> 
            <td>Name</td>
            <td><input type="text" name="name" id="name"></td>
        </tr>
        <tr> 
            <td>Age</td>
            <td><input type="text" name="age" id="age"></td>
        </tr>
        <tr> 
            <td>Email</td>
            <td><input type="text" name="email" id="email"></td>
        </tr>
        <tr> 
            <td></td>
            <td><input type="submit" name="Submit" id="submit" value="Add"></td>
        </tr>
    </table>    

    <button type="button" id="submitBtn">Show All</button>
    <div id="content"></div>    
</body>
</html>

view.js

I fetchd the data from the database. and used the show_all() function after that I called $.ajax, data, url, type, success function. The first time I try to fetch data from the database through AJAX.

$(document).ready(function(e) {
    $('#submitBtn').click(function() {

        debugger;

        $.ajax({
            //data :{action: "showroom"},
            url  :"index.php", //php page URL where we post this data to view from database
            type :'POST',
            success: function(data){
                $("#content").html(data);
            }
        });
    }); 
});

Can someone please help me with this?