Home | About | View All Posts

3 Aug 2014

How to show mySQL PHP data list via jQuery AJAX

As we know we can control instant loading activity of webpage by help of AJAX functionality without webpage reload. We create a XMLHttpRequest object for instant data interchange with server via AJAX.

One can read and learn AJAX implementation at webpage at this blog article – "How to implement AJAX in html website". Common example of AJAX implementation in real world can be examined at Google Map, YouTube etc.

We can use AJAX in a website using jQuery various readymade methods also. These methods works as abstraction layer of AJAX internal functionalities. Following are list of commonly used methods –
  1. $.load()
    It is simple in use and used to get or request content from a webpage. It uses common syntax as below -
    $(selector).load(URL, data, callback);
  2. $.get()
    It fetches data using an AJAX HTTP GET request and uses common syntax as below -
    $.get(URL,data,function(data, status, xhr), dataType)
  3. $.post()
    It fetches data using an AJAX HTTP POST request and uses common syntax as below -
    $(selector).post(URL,data, function(data, status, xhr), dataType)
  4. $.getJSON() -
    It fetches JSON encode data using a HTTP GET request and uses common syntax as below -
    $(selector).getJSON(url, data, success(data, status, xhr))
  5. $.ajax() -
    It executes an async AJAX request and uses common syntax as below -
    $.ajax({name:value, name:value, ... })

    For example –
    $.ajax({url:”test.txt”, cache:false, type: “GET”, dataType: “xml”, success: callbackFunction, error:callbackFunction })
Genrally we prfer $.ajax() jQuery method for implementing AJAX in a website or application due to more and flexible options or parameters for setting our requirements or needs.

Following are example to show mySQL PHP data list via jQuery AJAX. Main or Index file has a button named as "Load Data". mySQL PHP data is listed at click event of the button. -

Main or Index page html code sample -
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Loading mySQL data via jQuery AJAX</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script >
$(document).ready(function() {
$('button').click(function() {
url: "ajax-jquery-php-data.php",
success: function(r) {//success(result,status,xhr)
error: function(e) {//error(xhr,status,error)
alert("ERROR: " + e.status + " " + e.statusText);
<button>Load Data</button>
<div id="result"></div>
mySQL PHP data code sample -
It has general code to show mySQL data using PHP. You can list own data of a specific database. I have used Drupal opensource database and 'node' table to test the script. You have to change variable value of your own at very first line of the code only.
$con = mysql_connect($host, $username, $password) or die('ERROR: ' . mysql_error());
mysql_select_db($dbname, $con) or die('ERROR: '.mysql_error());
$q = "select * from $table";
$r = mysql_query($q);
echo '<table border="1" border-color="#999999" style="border:1px solid #999999;border-collapse:collapse;font-family:Arial, Helvetica, sans-serif; font-size:12px;">';
echo '<tr bgcolor="#eeeeee">';
$row = mysql_fetch_assoc($r, MYSQL_ASSOC);
foreach ($row as $col => $value) {
echo "<th>";
echo $col;
echo "</th>";
echo '</tr>';
while($rows = mysql_fetch_array($r, MYSQL_ASSOC))
echo '<tr>';
foreach($rows as $value){
echo '<td>';
echo $value;
echo '</td>';
}// end of foreach
echo '</tr>';
} // end of while
echo "</table>";

Tags : , , , , ,


Post a Comment