Fetch Record through Ajax from database

we have created 5 files for fetch record through Ajax from database.
(i) Index.php
(ii) response-file.php
(iii) connection.php
(iv) employee.sql
(v) jquery-1.11.2.min.js

fetch_record_through_ajax

Note:- you can download code from this

rar_image

(i) index.php:- file which has html form, ajax function and include jquery library file.

Note:- For fetch record, we should use GET method.

<html>
	<head>
		<script src="jquery-1.11.2.min.js"></script>
		<script>
			function Ajaxfun() {
				var username = $('#uname').val();
				$.ajax({

					// The URL for the request
					url : "response-file.php",

					// The data to send (will be converted to a query string)
					data : {
						uname : username
					},

					// Whether this is a POST or GET request
					type : "GET",

					// Code to run if the request succeeds;
					// the response is passed to the function
					success : function(response) {
						//alert(response);
						$("#ajaxDiv").html(response);
					},
					// Code to run if the request fails; the raw request and
					// status codes are passed to the function
					error : function(xhr, status, errorThrown) {
						alert("Sorry, there was a problem!");
						console.log("Error: " + errorThrown);
						console.log("Status: " + status);
						console.dir(xhr);
					},
				});

			}
		</script>
	</head>
	<body>
		<form>
			<div style="width:400px; background-color:#e9eaed">
				<div>
					<div style="float: left;width:30%">
						Select Name
					</div>
					<div style="float: left;width:70%">
						<select name="uname" id="uname">
							<option value="">Select Name</option>
							<option value="John">John</option>
							<option value="Tony">Tony</option>
							<option value="Leela">Leela</option>
							<option value="Robert">Robert</option>
						</select>
					</div>
				</div>
				<div style="clear: both;  height:5px;"></div>
				<div align="center" onclick="Ajaxfun()">
					<input type="button" name="getValue" value="Get Value"/>
				</div>
				<div style="clear: both;"></div>
				<div id="ajaxDiv"></div>
		</form>
		</div>
	</body>
</html>

(ii) response-file.php:- which has include database connection file and database query.

<?php
include ('connection.php');
$uname = mysql_real_escape_string($_REQUEST['uname']);
$errmsg = "";
$err_count = 0;

if ($uname == '') {
	$errmsg .= "Please select the uname";
	$err_count++;
}
if ($err_count == 0) {
	$query = mysql_query("select * from emp where emp_name='" . $uname . "'");
	while ($results = mysql_fetch_assoc($query)) {
		echo $results['emp_name'] . ' is a ' . $results['emp_desgination'] . ' and monthly income is ' . $results['emp_salary'];
	}

} else {
	echo $errmsg;
}
?>

(iii) connection.php:- which is include in the response-file.php

<?php
$host_name = "localhost";
$user_name = "root";
$password = "";
$database_name = "employee";
$conn = mysql_connect($host_name, $user_name, $password);
if (!$conn) {
	die('server is not connect');
} else {
	mysql_select_db($database_name, $conn);
}
?>

(iv) employee.sql:- upload in to mysql-database.

(v) jquery-1.11.2.min.js:- this jquery library include in the index.php file.