Introduction
This article shows how to retrieve data from MySQL using Ajax in PHP. Ajax is very useful in PHP for developing a dynamic website. It is used to create dynamic and fast web pages. This helps in updating part of a web page without reloading the entire page. In this article I will first create two files. The first file sends a request using jQuery and Ajax and second file processes the request and returns the response to the first file. You will see in the example below.
Example
The first example explains the "$.Ajax" method and the second example explains the "$.Post" method. Let's start with the first example of using the $.Ajax method.
First of all create a file "school.php" and include the jQuery library file and write some JavaScript functions for sending the request to "data.php" to receive the response for displaying the results on the same page.
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
function information() {
var Username = $('#Username').val();
var RollNo = $('#RollNo').val();
$.ajax({
type: "POST",
url: "data.php",
data: { Username: Username, RollNo: RollNo }
}).done(function (result) {
$("#message").html("Roll no: " + RollNo + " and Address: " + result);
});
}
</script>
</head>
<body>
<table>
<tr>
<td>Username:</td>
<td><input type="text" Username="Username" id="Username" /><td>
</tr>
<tr>
<td>Roll Number:</td>
<td><input type="text" Username="RollNo" id="RollNo" /><td>
</tr>
<tr>
<td></td>
<td><input type="button" Username="submit" id="submit" value="submit" onClick = "information()" /></td>
</tr>
</table>
<div id="message"></div>
</body>
</html>
And next create the "data.php" file and this file is included in the "school.php" file.
<?php
$Username = $_POST['Username'];
$RollNo = $_POST['RollNo'];
$connect = mysql_connect("localhost","root","");
$database= mysql_select_db("search", $connect);
$query = "SELECT address from students where Username='".$Username."' AND RollNo=".$RollNo;
$result = mysql_query($query,$connect);
$row=mysql_fetch_array($result);
echo $row['address'];
?>
Output
![ajax1.jpg]()
![ajax2.jpg]()
And in the second example I explain the use of the "$.Post" method.
Example
<html>
<head>
<title>Untitled Document</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript">
function get() {
$('#age').hide();
$.post('data.php', { name: form.name.value },
function (output) {
$('#age').html(output).fadeIn(1000);
});
}
</script>
</head>
<body>
</p>
<form name="form" method="post">
Please Enter Your Name:<input type="text" name="name">
<input type="button" value="get" onclick="get();">
<div id="age"></div>
</form>
</p>
</body>
</html>
This is your "data.php" file included in the "age.php" file.
<?php
$con = mysql_connect("localhost","root","");
if (!$con)
{
die('Could not connect: ' . mysql_error());
}
$name= mysql_real_escape_string($_POST['name']);
$age= mysql_query("select age from search.employee where name='$name'");
$age_num_rows=mysql_num_rows($age);
if($name==null)
echo "please enter name!";
else
{
if($age_num_rows==0)
echo "name does not exist!";
else
{
$age=mysql_result($age,0);
echo "$name age is $age";
}}
?>
Output
![ajax2jpg.jpg]()
![ajax4.jpg]()