Hello Guys., so in this above video, we are learning about how to fetch the data from database using jQuery, Ajax in php.
So.. Let's get started, First take a template, orelse you can follow the Video template where we are using Bootstrap for designing the view. goto getbootstrap.com and copy the starter template and continue with below code:
Step 1: Create a table named students below code:
Create a table as per below code in your database:
CREATE TABLE students (
id int,
fname varchar(100),
lname varchar(100),
class varchar(100),
section varchar(100)
);
Step 2: Create a file named index.php and paste the below code:
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">
<title>PHP - AJAX - CRUD</title>
</head>
<body>
<div class="container mt-5">
<div class="row">
<div class="col-md-12">
<div class="card">
<div class="card-header">
<h4>
PHP - AJAX - CRUD | Data without page reload using jquery ajax in php.
<button type="button" class="btn btn-primary float-right" data-toggle="modal" data-target="#Student_AddModal">
Add
</button>
</h4>
</div>
<div class="card-body">
<div class="message-show">
</div>
<table class="table table-bordered table-striped">
<thead>
<tr>
<th>ID</th>
<th>First Name</th>
<th>Last Name</th>
<th>Class</th>
<th>Section</th>
<th>Action</th>
</tr>
</thead>
<tbody class="studentdata">
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js" integrity="sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV" crossorigin="anonymous"></script>
<script>
$(document).ready(function () {
getdata();
});
function getdata()
{
$.ajax({
type: "GET",
url: "ajax-crud/fetch.php",
success: function (response) {
// console.log(response);
$.each(response, function (key, value) {
// console.log(value['fname']);
$('.studentdata').append('<tr>'+
'<td class="stud_id">'+value['id']+'</td>\
<td>'+value['fname']+'</td>\
<td>'+value['lname']+'</td>\
<td>'+value['class']+'</td>\
<td>'+value['section']+'</td>\
<td>\
<a href="#" class="badge btn-info viewbtn">VIEW</a>\
<a href="#" class="badge btn-primary edit_btn">EDIT</a>\
<a href="" class="badge btn-danger">Delete</a>\
</td>\
</tr>');
});
}
});
}
</script>
</body>
</html>
Step 3: Create a file named fetch.php inside ajax-crud and paste the below code:
First Create a folder name ajax-crud and create a file named fetch.php and paste the below code:
<?php
$conn = mysqli_connect("localhost","root","","phpcrud");
$query = "SELECT * FROM students";
$query_run = mysqli_query($conn, $query);
$result_array = [];
if(mysqli_num_rows($query_run) > 0)
{
foreach($query_run as $row)
{
array_push($result_array, $row);
}
header('Content-type: application/json');
echo json_encode($result_array);
}
else
{
echo $return = "<h4>No Record Found</h4>";
}
?>
Thanks and Regards,
Ved Prakash N
This comment has been removed by the author.
ReplyDeleteThank you for sharing this informative post. Looking forward to read more.
ReplyDeleteWeb Development Services Delhi/NCR
Betway Casino no deposit bonus codes 2021 - DrmCD
ReplyDeleteWe have some top games 안양 출장샵 to choose from and 아산 출장샵 a huge 충청남도 출장샵 range of free casino bonuses 전라남도 출장샵 for all the new 양산 출장샵 players, no deposit free spins for new and