ajax load data from database without refresh
 |
| ajax load data from database without refresh |
Hi Friends Today we are going to learn how to load data from MySQL database without page refresh or reload..
Just Follow the below example to learn fetch data from database without page refresh..
=>Database and Table:
Database Name: test
Table name: comment
Table structure for table `comment`
CREATE TABLE IF NOT EXISTS `comment` ( `id` int(11) NOT NULL AUTO_INCREMENT, `name` varchar(20) NOT NULL, `content` varchar(500) NOT NULL, PRIMARY KEY(id) ) ENGINE=MyISAM AUTO_INCREMENT=54 DEFAULT CHARSET=latin1;
Create 3 files named
1. index.html
2. script.js
3. comment.php
1. index.php
<html>
<head>
<title>AJAX PHP MySQL Load Data From Database Without Page Refresh</title>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script type="text/javascript" src="script.js"></script>
<style>
#success{
width:800px;
margin:auto;
}
</style>
</head>
<h2 align="center">AJAX Load Data From Database Without Page Refresh</h2>
<div id="success"></div>
</html>
2. script.js
$(document).ready(function(){
//Displaying Comment
$.ajax({
url:"comment.php",
method:"POST",
type:"text",
success: function(text){
$("#success").html(text);
setInterval(function(){
$("#success").load("comment.php");
},8000);
}
});
return false;
});
3. comment.php
<?php
$conn=new mysqli('localhost','root','','test');
$result=mysqli_query($conn,"SELECT*FROM comment ORDER by ID DESC");
$count=$result->num_rows;
if($count<=0){
echo "No Comment Found";
}else{
while($row=$result->fetch_array()){?>
<div id="body">
<div id="header">By:<?php echo $row['name'];?> ||Posted on: <?php echo $row['time'];?></div>
<div id="content"><?php echo $row['content'];?></div><hr/>
</div>
<?php } } ?>
That's it Friends how to load data from database without reload the page..
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.