Here we use 4 file to retrieve data from MySql database using Ajax.

  1. database.php
  2. index.php
  3. ajax_data.php
  4. update_ajax.php

Before to create files you need to create database and then create table following code will help to your database table

 CREATE TABLE `user_data` (
  `id` int(11) NOT NULL,
  `name` varchar(100) NOT NULL,
  `email` varchar(100) NOT NULL,
  `phone` varchar(100) NOT NULL,
  `city` varchar(100) NOT NULL
) ENGINE=InnoDB DEFAULT CHARSET=latin1;

#database.php

<?php
$servername = "localhost";
$username = "root";
$password = "";
$db = "tutorial";
// Create connection to db
$conn = mysqli_connect($servername, $username, $password, $db);
?>

#index.php

<!DOCTYPE html>
<html lang="en">
    <head>
        <title>View Ajax</title>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
    </head>
    <body>
        <div class="container">
            <h4>Users data</h4>
            <div class="alert alert-success alert-dismissible" id="success" style="display:none;">
                <a href="#" class="close" data-dismiss="alert" aria-label="close">×</a>
            </div>
            <table class="table table-bordered table-sm" >
                <thead>
                    <tr>
                        <th>Name</th>
                        <th>Email</th>
                        <th>Phone</th>
                        <th>City</th>
                        <th>Action</th>
                    </tr>
                </thead>
                <tbody id="table">

                </tbody>
            </table>
        </div>
        <!-- Modal Update-->
        <div class="modal fade" id="update_country" role="dialog">
            <div class="modal-dialog modal-sm">
                <div class="modal-content">
                    <div class="modal-header" style="color:#fff;background-color: #e35f14;padding:6px;">
                        <h5 class="modal-title"><i class="fa fa-edit"></i> Update</h5>

                    </div>
                    <div class="modal-body">

                        <!--1-->
                        <div class="row">
                            <div class="col-md-3">
                                <label>Name</label>
                            </div>
                            <div class="col-md-9">
                                <input type="text" name="name_modal" id="name_modal" class="form-control-sm" required>
                            </div>	
                        </div>
                        <!--2-->
                        <div class="row">
                            <div class="col-md-3">
                                <label>Email</label>
                            </div>
                            <div class="col-md-9">
                                <input type="text" name="email_modal" id="email_modal" class="form-control-sm" required>
                            </div>	
                        </div>
                        <!--3-->
                        <div class="row">
                            <div class="col-md-3">
                                <label>Phone</label>
                            </div>
                            <div class="col-md-9">
                                <input type="text" name="phone_modal" id="phone_modal" class="form-control-sm" required>
                            </div>	
                        </div>
                        <!--4-->
                        <div class="row">
                            <div class="col-md-3">
                                <label>City</label>
                            </div>
                            <div class="col-md-9">
                                <input type="text" name="city_modal" id="city_modal" class="form-control-sm" required>
                            </div>	
                        </div>
                        <input type="hidden" name="id_modal" id="id_modal" class="form-control-sm">
                    </div>
                    <div class="modal-footer" style="padding-bottom:0px !important;text-align:center !important;">
                        <p style="text-align:center;float:center;"><button type="submit" id="update_data" class="btn btn-default btn-sm" style="background-color: #e35f14;color:#fff;">Save</button>
                            <button type="button" class="btn btn-default btn-sm" data-dismiss="modal" style="background-color: #e35f14;color:#fff;">Close</button></p>

                    </div>
                </div>
            </div>
        </div>
        <!-- Modal End-->
        <script>
            $(document).ready(function() {
                $.ajax({
                    url: "ajax_data.php",
                    type: "POST",
                    cache: false,
                    success: function(dataResult) {
                        $('#table').html(dataResult);
                    }
                });
                $(function() {
                    $('#update_country').on('show.bs.modal', function(event) {
                        var button = $(event.relatedTarget); /*Button that triggered the modal*/
                        var id = button.data('id');
                        var name = button.data('name');
                        var email = button.data('email');
                        var phone = button.data('phone');
                        var city = button.data('city');
                        var modal = $(this);
                        modal.find('#name_modal').val(name);
                        modal.find('#email_modal').val(email);
                        modal.find('#phone_modal').val(phone);
                        modal.find('#city_modal').val(city);
                        modal.find('#id_modal').val(id);
                    });
                });
                $(document).on("click", "#update_data", function() {
                    $.ajax({
                        url: "update_ajax.php",
                        type: "POST",
                        cache: false,
                        data: {
                            id: $('#id_modal').val(),
                            name: $('#name_modal').val(),
                            email: $('#email_modal').val(),
                            phone: $('#phone_modal').val(),
                            city: $('#city_modal').val(),
                        },
                        success: function(dataResult) {
                            var dataResult = JSON.parse(dataResult);
                            if (dataResult.statusCode == 200) {
                                $('#update_country').modal().hide();
                                alert('Data updated successfully !');
                                location.reload();
                            }
                        }
                    });
                });
            });
        </script>
    </body>
</html>


#ajax_data.php

<?php
include 'database.php';
$sql = "SELECT * FROM user_data";
$result = $conn->query($sql);
if ($result->num_rows > 0) {
    while ($row = $result->fetch_assoc()) {
        ?>	
        <tr>
            <td><?php echo $row['name']; ?></td>
            <td><?php echo $row['email']; ?></td>
            <td><?php echo $row['phone']; ?></td>
            <td><?php echo $row['city']; ?></td>

            <td>
                <button type="button" class="btn btn-success btn-sm update" data-toggle="modal" data-keyboard="false" data-backdrop="static" 
                        data-target="#update_country"
                        data-id="<?= $row['id']; ?>"
                        data-name="<?= $row['name']; ?>"
                        data-email="<?= $row['email']; ?>"
                        data-phone="<?= $row['phone']; ?>"
                        data-city="<?= $row['city']; ?>">
                    Edit
                </button>
            </td>
        </tr>
        <?php
    }
} else {
    echo "<tr >
	     <td colspan='5'>No Result found !</td>
	 </tr>";
}
mysqli_close($conn);
?>

The above code will give us all the data from database table and show as in table


#update_ajax.php

<?php

include 'database.php';
$id = $_POST['id'];
$name = $_POST['name'];
$email = $_POST['email'];
$phone = $_POST['phone'];
$city = $_POST['city'];
$sql = "UPDATE `user_data` 
	SET `name`='$name',
	`email`='$email',
	`phone`='$phone',
	`city`='$city' WHERE id=$id";
if (mysqli_query($conn, $sql)) {
    echo json_encode(array("statusCode" => 200));
} else {
    echo json_encode(array("statusCode" => 201));
}
mysqli_close($conn);
?>

#output:


Download source code

Are you facing problems in understanding this article? download source code now