Retrieve sql Records using Ajax

free php tutorials, php classes, php utilities, free tools

In this tutorial, we will learn how we can retrieve sql records using Ajax.

First of all we will write Ajax Code

<script type="text/javascript">
function ajaxFunction(name)
{
var browser = navigator.appName;
if(browser == "Microsoft Internet Explorer")
{
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");

}
else
{
xmlhttp=new XMLHttpRequest();

}
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
document.getElementById("my_div").innerHTML=xmlhttp.responseText;
}
}

xmlhttp.open("GET","getrecords.php?name="+name,true);
xmlhttp.send();
}

</script>

Now we will write code for form with select box, in select box we will get all records of persons (only name of person) and when you select any record, you will find complete detail of person

<?php
include("db.php");
?>
<form action="" method="get" name="frm1">

<?php
$query="select * from persons";
echo '<select onchange="ajaxFunction(this.value)">';
$result=mysql_query($query);
while($rows=mysql_fetch_array($result)){
echo "<option name='name' value=".$rows['name'].">".$rows['name']."</option>";

}
echo "</select>";
?>
</form>
<div id="my_div"></div>

now we will create another php file getrecords.php and write following code

<?php
include("db.php");
$name= $_GET['name'];
$phone= $_GET['phone'];
$gender= $_GET['gender'];

$query="select * from persons where name='$name'";
echo "<table>";
$result=mysql_query($query);
while($rows=mysql_fetch_array($result)){

echo "<tr>";
echo "<td>Name : </td>";
echo "<td>".$rows['name']."</td>";
echo "</tr>";

echo "<tr>";
echo "<td>Gender : </td>";
if($rows['gender']=='1'){
$gender="Male";
}
else{
$gender="Female";

}
echo "<td>".$gender."</td>";
echo "</tr>";

echo "<tr>";
echo "<td>City : </td>";
echo "<td>".$rows['city']."</td>";
echo "</tr>";

echo "<tr>";
echo "<td>Country : </td>";
echo "<td>".$rows['country']."</td>";
echo "</tr>";

echo "<tr>";
echo "<td>Profession : </td>";
echo "<td>".$rows['profession']."</td>";
echo "</tr>";

}
echo "</table>";
?>

Ajax Retrive sql Record Example:
Click here to see example
Code
<html>
<head>
<script type="text/javascript">

function ajaxFunction(name)
{
var browser = navigator.appName;
if(browser == "Microsoft Internet Explorer")
{
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");

}
else
{// code for IE6, IE5
xmlhttp=new XMLHttpRequest();

}
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
document.getElementById("my_div").innerHTML=xmlhttp.responseText;
}
}

xmlhttp.open("GET","getrecords.php?name="+name,true);
xmlhttp.send();
}

function getquerystring() {
var form = document.forms['frm1'];
var word = form.word.value;
qstr = 'w=' + escape(word); // NOTE: no '?' before querystring
return qstr;
}


</script>


</head>
<body>

<form action="" method="get" name="frm1">

<table width="800" border="0">

<tr>
<td>Select Records</td>
<td>

<?php
include("db.php");

 

$query="select * from persons";
echo '<select onchange="ajaxFunction(this.value)">';
$result=mysql_query($query);
while($rows=mysql_fetch_array($result)){

echo "<option name='name' value=".$rows['name'].">".$rows['name']."</option>";

}
echo "</select>";
?>


</td>
</tr>
</table>
</form>
<div id="my_div"></div>
</body>
</html>

Code for getrecords.php

<?php
include("db.php");
$name= $_GET['name'];
$phone= $_GET['phone'];
$gender= $_GET['gender'];

$query="select * from persons where name='$name'";
echo "<table border=1 width='50%'>";
$result=mysql_query($query);
while($rows=mysql_fetch_array($result)){

echo "<tr>";
echo "<td width='40%'><strong>Name : </strong></td>";
echo "<td>".$rows['name']."</td>";
echo "</tr>";

echo "<tr>";
echo "<td><strong>Gender :</strong> </td>";
if($rows['gender']=='1'){
$gender="Male";
}
else{
$gender="Female";

}
echo "<td>".$gender."</td>";
echo "</tr>";

echo "<tr>";
echo "<td><strong>City : </strong></td>";
echo "<td>".$rows['city']."</td>";
echo "</tr>";

echo "<tr>";
echo "<td><strong>Country : </strong></td>";
echo "<td>".$rows['country']."</td>";
echo "</tr>";

echo "<tr>";
echo "<td><strong>Profession : </strong></td>";
echo "<td>".$rows['profession']."</td>";
echo "</tr>";

}
echo "</table>";
?>

Bookmark This Page