03-Apr-2023
.
Admin
Hi Dev,
This tutorial is focused on how to fetch data from a database in PHP. you'll learn how to fetch data from a database using PHP. We will use how to retrieve and display data from the database using jQuery Ajax without page refresh in PHP. if you have a question about how to retrieve and display data from a database using jQuery Ajax without page refresh using PHP then I will give a simple example with a solution.
Now, let's see the article on how to fetch data from a database in PHP. it's a simple example of how to fetch data from a database using PHP. you can understand the concept of how to retrieve and display data from a database using jQuery Ajax without page refresh using PHP. if you have a question about how to retrieve and display data from a database using jQuery Ajax without page refresh in PHP then I will give a simple example with a solution.
Step 1: Create Database And Table
CREATE DATABASE my_db;
CREATE TABLE `customers` (
`id` int(10) UNSIGNED NOT NULL,
`fname` varchar(255) COLLATE utf8mb4_unicode_ci NOT NULL,
`lname` varchar(255) COLLATE utf8mb4_unicode_ci NOT NULL,
`email` varchar(255) COLLATE utf8mb4_unicode_ci NOT NULL,
`created_date` date DEFAULT NULL
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_unicode_ci;
Step 2: Create a Database Connection File
<?php
$servername='localhost';
$username='root';
$password='';
$dbname = "my_db";
$conn=mysqli_connect($servername,$username,$password,$dbname);
if(!$conn){
die('Could not Connect MySql Server:' .mysql_error());
}
?>
Step 3: Fetch List data from the database
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>PHP Code to Fetch All Data from MySQL Database and Display in html Table</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" >
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
</head>
<body>
<div class="container mt-2">
<div class="page-header">
<h2>Customers List</h2>
</div>
<div class="row">
<div class="col-md-8">
<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 'mydbCon.php';
$query="select * from customers limit 200"; // Fetch all the data from the table customers
$result=mysqli_query($dbCon,$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>
<a href="javascript:void(0)" class="btn btn-primary view" data-id="<?php echo $array[0];?>">View</a>
</td>
</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="col-md-4">
<span id="fname"></span><br>
<span id="lname"></span><br>
<span id="email"></span><br>
</div>
</div>
</div>
</body>
<script type="text/javascript">
$(document).ready(function($){
$('body').on('click', '.view', function () {
var id = $(this).data('id');
// ajax
$.ajax({
type:"POST",
url: "ajax-fetch-record.php",
data: { id: id },
dataType: 'json',
success: function(res){
$('#fname').html(res.fname);
$('#lname').html(res.lname);
$('#email').html(res.email);
}
});
});
});
</script>
</html>
Step 4: Fetch/Retrieve and Display Using jQuery Ajax Without Reload Page
<?php
include "db.php";
$id = $_POST['id'];
$query="SELECT * from customers WHERE id = '" . $id . "'";
$result = mysqli_query($dbCon,$query);
$cust = mysqli_fetch_array($result);
if($cust) {
echo json_encode($cust);
}else {
echo "Error: " . $sql . "" . mysqli_error($dbCon);
}
?>
I hope it could help you...
#PHP
