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 |
