Hi All,
Searching using Ajax is very important when we need to show the result in the same page without refreshing it.
It is composed of 2 steps
Step 1: Design the search page with Ajax function. Save this file as searchform.php
<html>
<head>
<script>
function loadDoc() {
//alert('HUP');
var key=document.frmsearch.sname.value;
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (xhttp.readyState == 4 && xhttp.status == 200) {
document.getElementById("demo").innerHTML = xhttp.responseText;
}
};
xhttp.open("GET", "searchstud.php?key="+key, true);
xhttp.send();
}
</script>
</head>
<body >
<form name=frmsearch method=post>
<center>Name <input type=text name=sname onkeyup="loadDoc()"><input type=button value='Search Student'onclick="loadDoc()">
</center>
</form>
<div id="demo" align=center><h2>Search Result</h2></div>
</body>
</html>
Step2. PHP code to search in the database based on the Name field in Student table. Save this file as searchstud.php
<?php
$con=mysql_connect("localhost","root","");
mysql_select_db("SNIT",$con);
$sname=$_GET['key'];
$sql="Select * from student where name like '%$sname%'";
$data=mysql_query($sql,$con);
echo "<table border=1 align=center width=50%>";
echo "<tr><th>Name</th><th>Roll No</th><th>Marks</th></tr>";
while($row=mysql_fetch_array($data))
{
$name=$row['name'];
$rollno=$row['rollno'];
$marks=$row['marks'];
echo "<tr><td>$name</td><td>$rollno</td><td>$marks</td></tr>";
}
mysql_close($con);
?>
Working of this program
Here when we type in the textbox the 'onkeyup' event of textbox triggers the Ajax function 'loadDoc' which in turn make an http connection with the searching php program 'searchstud.php'.
The result generated by the php program will be send back to the searchform.php and updated in the area specified by the <div> tag in the same page.
Searching using Ajax is very important when we need to show the result in the same page without refreshing it.
It is composed of 2 steps
Step 1: Design the search page with Ajax function. Save this file as searchform.php
<html>
<head>
<script>
function loadDoc() {
//alert('HUP');
var key=document.frmsearch.sname.value;
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (xhttp.readyState == 4 && xhttp.status == 200) {
document.getElementById("demo").innerHTML = xhttp.responseText;
}
};
xhttp.open("GET", "searchstud.php?key="+key, true);
xhttp.send();
}
</script>
</head>
<body >
<form name=frmsearch method=post>
<center>Name <input type=text name=sname onkeyup="loadDoc()"><input type=button value='Search Student'onclick="loadDoc()">
</center>
</form>
<div id="demo" align=center><h2>Search Result</h2></div>
</body>
</html>
Step2. PHP code to search in the database based on the Name field in Student table. Save this file as searchstud.php
<?php
$con=mysql_connect("localhost","root","");
mysql_select_db("SNIT",$con);
$sname=$_GET['key'];
$sql="Select * from student where name like '%$sname%'";
$data=mysql_query($sql,$con);
echo "<table border=1 align=center width=50%>";
echo "<tr><th>Name</th><th>Roll No</th><th>Marks</th></tr>";
while($row=mysql_fetch_array($data))
{
$name=$row['name'];
$rollno=$row['rollno'];
$marks=$row['marks'];
echo "<tr><td>$name</td><td>$rollno</td><td>$marks</td></tr>";
}
mysql_close($con);
?>
Working of this program
Here when we type in the textbox the 'onkeyup' event of textbox triggers the Ajax function 'loadDoc' which in turn make an http connection with the searching php program 'searchstud.php'.
The result generated by the php program will be send back to the searchform.php and updated in the area specified by the <div> tag in the same page.