Skip to content
Advertisement

Fetch data from database in php through AJAX,

index.php

First I create a connection with the database, I design table through <td> and <tr>, I create a variable $action to get data through AJAX. I use 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 fetch data from the database. I use the show_all() function after that I call $.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);
            }
        });
    }); 
});

Advertisement

Answer

**index.php**

<?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**

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

                }

            });



    }); 
});


**datatable.js**


$(document).ready(function() {
    $('#datatable').DataTable( {

    } );
} );
User contributions licensed under: CC BY-SA
6 People found this is helpful
Advertisement