php
PHP - AJAX and MySQL Database
AJAX can be used to interacting with the database. You don't have to make any extra effort. Only write the database logic in you server side page.

The following example will demonstrate how a web page can fetch information from a database with AJAX :

Sample Application
idNameCollegeEmail IdMobile
1V V Ramana ReddyS V Arts and Science Collegeinfo@freetimelearning.com9963666068
2ChantiVidhyalaya Degree Collegefreetimelearn@gmail.com9010023210
3RamanaS V Universityvvramanareddy9963@gmail.com9966463846
4SureshAadhishankarasureshreddy@gmail.com9700900292
5Suman ReddyPriyadharshinisumanreddy.mca@gmail.com9966395199
ajax-database.php :
<!DOCTYPE html>
<html>
<head>
	<title>AJAX and MySQL Database</title>
</head>
<body>
<style type="text/css">
	.cus_form{ 
			padding:6px 15px; 
			border-radius:3px; 
			border:1px solid #0099da; 
			width:300px;
		}
</style>
<script type="text/javascript">
function showUser(str) {
    if (str == "") {
        document.getElementById("stu_details").innerHTML = "";
        return;
    } else { 
        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 (this.readyState == 4 && this.status == 200) {
                document.getElementById("stu_details").innerHTML = this.responseText;
            }
        };
        xmlhttp.open("GET","get_student_details.php?q="+str,true);
        xmlhttp.send();
    }
}
</script>

<form>
	<select name="users" class="cus_form" onchange="showUser(this.value)">
      <option value="">Select Student:</option>
      <option value="1">V V Ramana Reddy</option>
      <option value="2">Chanti</option>
      <option value="3">Ramana</option>
      <option value="4">Suresh</option>
      <option value="5">Suman Reddy</option>
  </select>
</form>
<br>

<div id="stu_details"><h4>Student Deatils are :</h4></div>

</body>
</html>

Code explanation :

First, check if student_details_2 table in your database. If no student is selected (str == ""), clear the content of stu_details and exit the function. If a student is selected, do the following :

  • Create an XMLHttpRequest object
  • Create the function to be executed when the server response is ready
  • Send the request off to a file on the server
  • Notice that a parameter (q) is added to the URL (with the content of the dropdown list)

The source code in "get_student_details.php" runs a query against a MySQL database, and returns the result in an HTML table :

get_student_details.php :
<!DOCTYPE html>
<html>
<head>
	<title>AJAX and MySQL Database</title>
</head>


<style type="text/css">
	table {
		width: 100%;
		border-collapse: collapse;
	}
	
	table, td, th {
		border: 1px solid black;
		padding: 5px;
	}
	
	th {text-align: left;}
</style>
<body>

<?php
	$q = intval($_GET['q']);
	
	$ftl_connect = mysqli_connect("localhost", "root", "", "php_mysql_classes");
	
	if (!$ftl_connect) {
		die('Could not connect: ' . mysqli_error($ftl_connect));
	}
	
	mysqli_select_db($ftl_connect,"ajax_demo");
	$sql="SELECT * FROM student_details_2 WHERE stu_id = '".$q."'";
	$result = mysqli_query($ftl_connect,$sql);
	
	echo "<table>
	<tr>
	<th>Name</th>
	<th>College</th>
	<th>Email ID</th>
	<th>Mobile</th>
	</tr>";
	while($row = mysqli_fetch_array($result)) {
		echo "<tr>";
		echo "<td>" . $row['stu_name'] . "</td>";
		echo "<td>" . $row['college'] . "</td>";
		echo "<td>" . $row['email'] . "</td>";
		echo "<td>" . $row['mobile'] . "</td>";
		echo "</tr>";
	}
	echo "</table>";
	mysqli_close($ftl_connect);
?>

</body>
</html>