 |
| jquery ajax get data from database |
You need Jquery.js to work with ajax (JQuery CDN) .
=>Database Structure:
Database Name: test
Table Name: user
SQL Codes for creating Table user
CREATE TABLE IF NOT EXISTS `user` ( `id` int(11) NOT NULL AUTO_INCREMENT, `username` varchar(150) NOT NULL, `email` varchar(150) NOT NULL, PRIMARY KEY (`id`) ) ENGINE=MyISAM AUTO_INCREMENT=5 DEFAULT CHARSET=latin1;SQL for Inserting User Data:
INSERT INTO `user` (`id`, `username`, `email`) VALUES (2, 'ANJAN KUMAR', 'Anjankumardhali@gmail.com'), (48, 'ANJAN', 'biswasshiuli608@gmail.com'), (10, 'Supriya Gain', 'SupriyaStar@Yahoo.com'), (42, 'Priya malhotra', 'priya6@gmail.coma'), (47, 'ANJAN KUMAR', 'Anjankumardhali@gmail.com'), (49, 'ANJAN', 'biswasshiuli@gmail.com'), (51, 'ANJANBD', 'biswasshiuli@gmail.com');
create 4 files and download jquery.js or use JQuery CDN
1. index.html
<html> <head> <title>AJAX PHP Fetch Data from Database</title> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"> </script> <script type="text/javascript" src="script.js"></script> <link rel="stylesheet" type="text/css" href="style.css"/> </head> <div id="display"></div> </html>2. display.php codes:
<table>
<tr>
<th>UserName</th>
<th>Email</th>
</tr>
<?php
$conn=new mysqli('localhost','root','','test');
$result=mysqli_query($conn,"SELECT*FROM user");
while($row=$result->fetch_array()){?>
<tr>
<td><?php echo $row['username'];?></td>
<td><?php echo $row['email'];?></td>
</tr>
<?php }?>
</table>
3. script.js Codes:$(document).ready(function(){
$.ajax({
url:"display.php",
type:"POST",
success: function(text){
$("#display").html(text);
}
});
});
4. style.css codes:td,th{
padding:8px;
border:1px solid green;
}
table{
border-collapse:collapse;
}
th{
font-size:15px;
padding:8px;
color:white;
background:#0033cc;
border-radius:4px;
}
tr:nth-child(odd){background:lightgreen}
tr:nth-child(even){background:lightblue}
Note: Must use Jquery.js or Jquery cdnThat's it guys how to get data from database jquery ajax.
please keep visiting for more codes...Thank you..
No comments:
Post a Comment
Thank You for Your Comment
Note: Only a member of this blog may post a comment.