Novotel Infoplus: AJAX Database table Display

AJAX Database table Display

Other web application transmit information to and from the sever using synchronous requests. This means you fill out a form, hit submit, and get directed to a new page with new information from the server.With AJAX when submit is pressed, JavaScript will make a request to the server, interpret the results and update the current screen. the user would never know that anything was even transmitted to the server.

For the purpose of this tutorial,I have created database called "oops" and then created the following table name "user".

CREATE TABLE IF NOT EXISTS `user` (
`id` int(30) NOT NULL AUTO_INCREMENT,
`FirstName` varchar(50) NOT NULL,
`Surname` varchar(50) NOT NULL,
`Age` varchar(50) NOT NULL,
`Country` varchar(50) NOT NULL,
`Job` varchar(50) NOT NULL,
PRIMARY KEY (`id`)
) ENGINE=MyISAM DEFAULT CHARSET=latin1 AUTO_INCREMENT=5 ;

--
-- Dumping data for table `user`
--

INSERT INTO `user` (`id`, `FirstName`, `Surname`, `Age`, `Country`, `Job`) VALUES
(1, 'Oksana', 'Babiak', '22', 'Ukrane', 'Web Developer'),
(2, 'Larisa', 'Volk', '30', 'Ukrane', 'Web Designer'),
(3, 'Ruth', 'Allen', '39', 'USA', 'Teacher'),
(4, 'Lissa', 'Diction', '31', 'Australia', 'Programmer');

Next create the HTML file which contains AJAX code

<html>
<head>
<script type="text/javascript">
function showUser(str)
{
if (str=="")
{
document.getElementById("txtHint").innerHTML="";
return;
}
if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else
{// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
    {
    document.getElementById("txtHint").innerHTML=xmlhttp.responseText;
    }
}
xmlhttp.open("GET","user.php?id="+str,true);
xmlhttp.send();
}
</script>
</head>
<body>

<center><form>
<select name="users" onchange="showUser(this.value)">
<option value="">Select a person:</option>
<option value="1">Oksana Babiak</option>
<option value="2">Larisa Volk</option>
<option value="3">Ruth Allen</option>
<option value="4">Lizza Dicton</option>
</select>
</form>
<br />
<div id="txtHint"><b>Person details will be listed here.</b></div></center>

</body>
</html>

Next create user.php which take data from MySQL table "user".

<?php
$id=$_GET["id"];

$con = mysql_connect('localhost', 'root', '');
if (!$con)
{
die('Could not connect: ' . mysql_error());
}

mysql_select_db("oops", $con);

$sql="SELECT * FROM user WHERE id = '".$id."'";

$result = mysql_query($sql);

echo "<table bgcolor=#b2bdaf>
<tr bgcolor=#ffffff>
<th>Firstname</th>
<th>Lastname</th>
<th>Age</th>
<th>Hometown</th>
<th>Job</th>
</tr>";

while($row = mysql_fetch_array($result))
{
echo "<tr bgcolor=#ffffff>";
echo "<td>" . $row['FirstName'] . "</td>";
echo "<td>" . $row['Surname'] . "</td>";
echo "<td>" . $row['Age'] . "</td>";
echo "<td>" . $row['Country'] . "</td>";
echo "<td>" . $row['Job'] . "</td>";
echo "</tr>";
}
echo "</table>";

mysql_close($con);
?>

Above codes will be created following smooth application

Person details will be listed here.

Firstname	Lastname	Age	Hometown	Job
Oksana	Babiak	22	Ukrane	Web Developer

Sunday, September 9, 2012

AJAX Database table Display

No comments:

Post a Comment