How to fetch & display data using AJAX in PHP & MySQL

Tech Area
October 6, 2023

In this tutorial, We will learn how to fetch and display data from database using AJAX in PHP and MySQL. The fetched data will be shown in table form.

Files used in this tutorial:

1- connection.php (database connection file)

2- index.php (registration form and AJAX script)

3- insert-data.php (insert data into database)

4- show-data.php (fetch data from database)

Below are the step by step process of how to fetch and display data in table using Jquery AJAX.

Step 1: Create a Database connection

In this step, create a new file connection.php to create database connection.

connection.php

<?php
$server = "localhost";
$username = "root";
$password = "";
$database = "college_db";
$connection = mysqli_connect("$server","$username","$password");
$select_db = mysqli_select_db($connection, $database);
if(!$select_db)
{
	echo("connection terminated");
}
?>

Step 2: Create Registration form

In this step, create a new file index.php. This is the main file used to implement AJAX to insert and fetch data.

This screenshot shows the registration form.

index.php

<html>  
<head>  
    <title>Registration Form</title>  
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />  
</head>
<style>
 .box
 {
  width:100%;
  max-width:600px;
  background-color:#f9f9f9;
  border:1px solid #ccc;
  border-radius:5px;
  padding:16px;
  margin:0 auto;
 }
 .error
{
  color: red;
  font-weight: 700;
} 
</style>
<body>  
    <div class="container">  
    <div class="table-responsive">  
    <h3 align="center">Registration Form</h3>
     <div class="box">
      <div class="form-group">
       <label for="name">Enter Your Name</label>
       <input type="text" name="name" id="name" placeholder="Enter Name" class="form-control"/>
      </div>  
       <div class="form-group">
       <label for="email">Enter Your Email</label>
       <input type="text" name="email" id="email" placeholder="Enter Email" class="form-control"/>
      </div>
      <div class="form-group">
       <label for="phone">Enter Your Phone Number</label>
       <input type="text" name="phone" id="phone" placeholder="Enter Phone Number" class="form-control"/>
      </div>
      <div class="form-group">
       <label for="phone">Enter Your Address</label>
       <textarea name="address" id="address" placeholder="Enter Address" required class="form-control"></textarea> 
      </div>
      <div class="form-group">
       <input type="submit" id="register" name="register" value="Submit" class="btn btn-success" />
       </div>
       <p class="error" id="err"></p>
     </div>
   </div>  
   <br>
   <h2 class="text-center">Display Data using Jquery AJAX</h2>
   <br>
   <button id="showdata" class="btn btn-primary">Show Data</button>
   <table class="table table-bordered">
    <thead>
      <th>Id</th>
      <th>Name</th>
      <th>Email</th>
      <th>Phone</th>
      <th>Address</th>
    </thead>
    <tbody id="result">
    </tbody>
   </table>
  </div>
 </body>  
</html>

Now use jquery AJAX script.

<script src="https://code.jquery.com/jquery-3.7.1.js"></script>
<script type="text/javascript">
  $(document).ready(function(){
    $("#register").on("click", function(e){
      var name = $("#name").val();
      var email = $("#email").val();
      var phone = $("#phone").val();
      var address = $("#address").val();
      $.ajax({
        url: 'insert-data.php',
        method: 'post',
        data: {fullname: name, emailid: email, phone_no: phone, address: address},
        success: function(data){
          $("#err").html(data);
        }
      });
    })

    $("#showdata").on("click", function(e){
      $.ajax({
        url: 'show-data.php',
        method: 'post',
        success: function(result){
          $("#result").html(result);
        }
      });
    })
  });
</script>

Step 3: Create new file for insert data

In this step, create a new file insert-data.php. This file used to insert data into database.

insert-data.php

<?php
include('connection.php');
$name = $_POST['fullname'];
$email = $_POST['emailid'];
$phone = $_POST['phone_no'];
$address = $_POST['address'];

$insert_query = mysqli_query($connection, "insert into tbl_registration set name='$name', email='$email', phone='$phone', address='$address'");
if($insert_query>0)
{
	echo "Data submitted successfuly.";
}
else
{
	echo "Error!";
}
?>

Step 4: Create new file for fetch data

In this step, create a new file show-data.php. This file used to fetch data from database.

show-data.php

<?php
include('connection.php');
$fetch_query = mysqli_query($connection, "select * from tbl_registration");
$row = mysqli_num_rows($fetch_query);
if($row>0)
{
	while($res = mysqli_fetch_array($fetch_query))
	{?>
		<tr>
			<td><?php echo $res['id']; ?></td>
			<td><?php echo $res['name']; ?></td>
			<td><?php echo $res['email']; ?></td>
			<td><?php echo $res['phone']; ?></td>
			<td><?php echo $res['address']; ?></td>
		</tr>
	<?php }
}
?>

Download Source Code

How to Insert Data using AJAX in PHP & MySQL

How to Fetch & Display JSON Data in Table using AJAX in PHP & MySQL

Subscribe us via Email

Join 10,000+ subscriber

Subscribe on YouTube

PHP Projects

Student record system project in PHP and MySQL Last Updated: July 3, 2024

Food ordering system project in PHP and MySQL Last Updated: June 27, 2024

Tourism management system project in PHP and MySQL Last Updated: June 24, 2024

Restaurant table booking system project in PHP and MySQL Last Updated: February 22, 2024

Hostel management system project in PHP and MySQL Last Updated: February 14, 2024