Video tutorial illustrating, Fetching / Extraction of Data From Database Without Refreshing Webpage: jQuery + PHP + JSON + MySQL
You need not worry, even if you don’t know any one of these technology. Follow the tutorial, practice and understand, so that you could implement it for your applications.
Also read: Insert Data Into Database Without Refreshing Webpage.
In this tutorial we’ll be showing you, how to extract the data present in our MySQL database table without refreshing the webpage.
HTML code
index.html
1 2 3 4 5 6 7 8 9 10 | <html> <head> <title>Fetch/Extract Data From Database: jQuery + JSON + PHP+ AJAX</title> </head> <body> <ul></ul> <script type="text/javascript" src="script/jquery-1.8.2.min.js"></script> <script type="text/javascript" src="script/my_script.js"></script> </body> </html> |
Here we have a unordered list. We’ll fill it’s list items by extracting the data from the database, using jQuery and PHP.
PHP File: Database Connection Code
db.php
1 2 3 4 | < ?php
$conn = mysql_connect('localhost', 'root', '');
$db = mysql_select_db('company');
?> |
Here we’re connecting to the database called company.
Also Read: Connecting To MySQL server From PHP
PHP File: Extracting / Fetching Data From Database table and JSON Encoding
fetch.php
1 2 3 4 5 6 7 8 9 10 11 12 13 14 | < ?php
include_once('db.php');
$sql = "SELECT * FROM people";
$res = mysql_query($sql);
$result = array();
while( $row = mysql_fetch_array($res) )
array_push($result, array('name' => $row[0],
'age' => $row[1],
'company' => $row[2]));
echo json_encode(array("result" => $result));
?> |
Here we connect to the database by including db.php file.
Next, select all the fields from the people table.
Extract data one-by-one and store it inside the array variable $result, with key => value pair (associative array).
Finally, using PHP standard function json_encode(), we encode the fetched data.
jQuery File: Accessing The Data And Displaying
my_script.js
1 2 3 4 5 6 7 8 9 10 11 | function updates() {
$.getJSON("fetch.php", function(data) {
$("ul").empty();
$.each(data.result, function(){
$("ul").append("<li>Name: "+this['name']+"</li>
<li>Age: "+this['age']+"</li>
<li>Company: "+this['company']+"</li>
<br />");
});
});
} |
Using the jQuery AJAX method’s shortcut, $.getJSON() method, we parse fetch.php and process the data passed to the callback function.
We empty the unordered list to avoid duplicate entries later on.
Now loop through all the objects present in the jSON output of fetch.php
Using it’s key, retrieve it’s respective values and append it to the unordered list, as it’s list items.
jQuery File: AJAXing
my_script.js
1 2 3 4 5 6 | function done() {
setTimeout( function() {
updates();
done();
}, 200);
} |
Call updates() function and itself[ done() ] inside setTimeout() function with a time gap of 200 milliseconds.
jQuery File: Full/Final Code
my_script.js
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 | $(document).ready( function() {
done();
});
function done() {
setTimeout( function() {
updates();
done();
}, 200);
}
function updates() {
$.getJSON("fetch.php", function(data) {
$("ul").empty();
$.each(data.result, function(){
$("ul").append("<li>Name: "+this['name']+"</li>
<li>Age: "+this['age']+"</li>
<li>Company: "+this['company']+"</li>
<br />");
});
});
} |
Call done() once the document is loaded.
You could also call done() function once the window is focused or once some button is clicked or any other user events. This would reduce the database calls considerably.
Fetching / Extraction of Data From Database Without Refreshing Webpage: jQuery
[youtube https://www.youtube.com/watch?v=G_7oYeNU_3g]
This would highly enhance the user experience and would help in building rich web applications which look more like desktop / standalone applications.
Please share this video with your friends and also LIKE it on social network sites and on YouTube. Thanks you <3
Related Read:
Insert Data Into Database Without Refreshing Webpage