How to Fetch Data From Database in PHP using Ajax

Mar 17, 2022 . Admin



Hello dev,

I am going to explain you how to How to Fetch Data From Database in PHP using Ajax. You will learn how to How to Fetch Data From Database Using Ajax. In side this article we will see how to Fetch data from database in php through AJAX.

This article will give you simple example of How to View Data using PHP Ajax. We will use get simple example How to retrieve data from database in PHP using AJAX?.

I will give you simple Example how to Get data from database using AJAX, Javascript, PHP, MySQL.

So, let's see bellow solution:

connection.php
<?php 
    $servername = "localhost";
    $username = "root";
    $password = "";
    $dbname = "aatman";

    $conn = new mysqli($servername,$username,$password,$dbname);

    if($conn->connect_error){
        die ('connection faild:'.$conn->connect_error);
    }
?>
index.php
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>How to Fetch Data From Database in PHP using Ajax</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
    <div class="container mt-5">
        <div class="card">
            <div class="card-header">
                <h4 class="text-center">How to Fetch Data From Database in PHP using Ajax - Mywebtuts.com</h4>
            </div>
            <div class="card-body">
                <table class="table">
                    <thead>
                        <tr>
                            <th scope="col">#</th>
                            <th scope="col">First</th>
                            <th scope="col">Last</th>
                            <th scope="col">Email</th>
                            <th scope="col">Action</th>
                        </tr>
                    </thead>
                    <tbody>
                        
                        <?php
                            include 'connection.php';
                            $query="select * from students limit 5";
                            $result=mysqli_query($conn,$query);
                        ?>
                        
                        <?php 
                            if ($result->num_rows > 0): 
                        ?>
                        
                        <?php 
                            while($array=mysqli_fetch_row($result)): 
                        ?>
                        
                        <tr>
                            <th scope="row"><?php echo $array[0];?></th>
                            <td><?php echo $array[1];?></td>
                            <td><?php echo $array[2];?></td>
                            <td><?php echo $array[3];?></td>
                            <td>
                                <button class="btn btn-primary view" data-toggle="modal" data-target="#myModal" data-id="<?php echo $array[0];?>">View</button>
                            </tr>
                        
                        <?php endwhile; ?>
                        
                        <?php else:?>
                        
                        <tr>
                            <td colspan="3" rowspan="1" headers="">No Data Found</td>
                        </tr>
                        
                        <?php endif; ?>
                        <?php mysqli_free_result($result); ?>
                    </tbody>
                </table>
            </div>
            <div class="modal fade" id="myModal" role="dialog">
                <div class="modal-dialog">
                    <div class="modal-content">
                        <div class="modal-header">
                            <h4 class="modal-title">Students List</h4>
                        </div>
                        <div class="modal-body">
                            <div class="row">
                                <div class="col-md-12">
                                    <b>First Name : </b><span id="fname"></span>        
                                </div>
                            </div>
                            <div class="row mt-2">
                                <div class="col-md-12">
                                    <b>Last Name : </b><span id="lname"></span>
                                </div>
                            </div>
                            <div class="row mt-2">
                                <div class="col-md-12">
                                    <b>Email : </b><span id="email"></span>     
                                </div>
                            </div>
                            
                        </div>
                        <div class="modal-footer">
                            <button type="button" class="btn btn-danger" data-dismiss="modal">Close</button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
                    
<script type="text/javascript">
    $(document).ready(function($){
        $('body').on('click', '.view', function () {
            $('#myModal').modal();
            var id = $(this).data('id');
            
            $.ajax({
            type:"POST",
            url: "ajax-fetch-record.php",
            data: { id: id },
            dataType: 'json',
            success: function(res){
                console .log(res);
                $('#fname').html(res.first_name);
                $('#lname').html(res.last_name);
                $('#email').html(res.email);
            }
        });
    });
    });
</script>
</body>
</html>

ajax-fetch-record.php
<?php
    include "connection.php";
    
    $id = $_POST['id'];
    $query="SELECT * from students WHERE id = '" . $id . "'";
    $result = mysqli_query($conn,$query);
    $cust = mysqli_fetch_array($result);
    
    if($cust) {
        echo json_encode($cust);
    } else {
        echo "Error: " . $sql . "" . mysqli_error($conn);
    }
?>
Output:

It will help you...
#PHP