Ever wonder how to display dynamic data? When a certain document data has change it automatically update the changes? Well, node js does it easily. But today we will just use jquery to fetch data from a file which we would call it data.php Let's get started.
Files Needed
index.htmldata.php
index.html file, put this code below.
<html>
<head>
<title>jQuery PHP Auto Refresh Data</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div id="result"></div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
loadData();
function loadData() {
setTimeout(loadData, 0);
$.get('data.php', function(data) {
$('#result').html(data);
});
}
});
</script>
</body>
</html>
data.php we will just simply echo the result. Ofcourse you can have your own way to display your data in some complex web application. Let's make it simple here with the code below.
<?php
$persons = array(
'John Doe',
'Mary Manhatan',
'Anthony Davies',
'Clark Smith',
'Kyle Maine',
'Danny Fox',
'Nathan Embler'
);
foreach ($persons as $person) {
echo $person . "<br>";
}
?>
data.php file and save it. See how it works :)
0 comments :
Post a Comment